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();