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

感谢任何帮助。

编辑:据我检查，模态占位符实际上已填充了数据，但模态未显示。我都尝试了

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