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

任何帮助表示感谢。

修改在我查看时，模态占位符实际上已经填充了数据，但模态没有显示出来。我试过了两个

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

＆安培;

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

有什么想法吗？

Answer 1

j render 默认情况下搜索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();

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

1 个答案: