Rails，Bootstrap，試圖動態加載模態不能按預期工作

Question

好的，我有一個鏈接到HTML模式，它完美的作品。 正如你可以看到那裏的鏈接，但我不需要它在我的應用程序。

<div class="block"> 
    <a data-toggle="modal" class="btn btn-danger btn-block" role="button" href="#editor-modal">Run modal with WYSIWYG editor</a> 

    <!-- Modal with WYSIWYG editor --> 
    <div aria-hidden="true" style="display: none;" id="editor-modal" class="modal fade" tabindex="-1" role="dialog"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h4 class="modal-title"><i class="icon-quill2"></i> WYSIWYG editor inside modal</h4> 
       </div> 



       <div class="modal-footer"> 
        <button class="btn btn-warning" data-dismiss="modal">Close</button> 
        <button class="btn btn-primary">Save</button> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /modal with WYSIWYG editor --> 

</div> 

而不是在我的應用程序中有大量的模態，我想動態加載它們。

我試着定義一個佔位符並在那裏加載模態，然後顯示它。 我已經做了幾次，但這次由於某種原因它不起作用。

所以在我index.html.erb我

<div id="modal-placeholder" class="block"> </div> 

我有我的部分_addNewModal.html.erb：

<!-- Modal with WYSIWYG editor --> 
<div aria-hidden="true" style="display: none;" id="editor-modal" class="modal fade" tabindex="-1" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
       <h4 class="modal-title"><i class="icon-quill2"></i> WYSIWYG editor inside modal</h4> 
      </div> 



      <div class="modal-footer"> 
       <button class="btn btn-warning" data-dismiss="modal">Close</button> 
       <button class="btn btn-primary">Save</button> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- /modal with WYSIWYG editor --> 

我用下面的代碼加載。

$('#modal-placeholder').html("<%= j render 'news/modals/addNewModal'%>") 
$('#editor-modal').modal('toggle'); 

我不明白這裏有什麼問題。我試圖複製我的模板的HTML代碼，但由於某種原因，它不起作用。

任何幫助表示讚賞。

編輯： 當我被選中，模式佔位符實際上充滿了數據，但該模式不顯示up.I都嘗試

$('#editor-modal').modal('toggle'); 

&

$('#editor-modal').modal('toggle'); 

任何想法？

Answer 1

的j通過一個js.erb文件默認搜索渲染

當渲染Javascript代碼裏面的諧音，你應該使用escape_javascript方法，像這樣

$('#modal-placeholder').html("<%= escape_javascript render(:partial => 'news/modals/addNewModal') %>");

如果明確申報partial密鑰，那麼它將搜索您的html.erb file instead of js.erb

因此，請嘗試上述命令或此。

$('#modal-placeholder').html("<%= j render(:partial => 'news/modals/addNewModal') %>");

對於來回切換，從表單中刪除內嵌display: none;並添加一個風格吧，

#editor-modal 
{ 
    display: none; 
} 

然後切換會工作。

$('#editor-modal').toggle();