Rails，Bootstrap，尝试动态加载模式无法按预期工作

Question

好的，我在 html 中有一个 modal 的链接，效果很好。 您也可以在那里看到链接，但我的应用中不需要它。

<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 代码，但由于某种原因它不起作用。

任何帮助表示赞赏。

编辑： 正如我检查的那样，modal-placeholder 实际上是用数据填充的，但是模态没有显示出来。我都试过了

$('#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();