如何通过 Rails 中的 JS 请求显示 twitter 引导模式？答案

【问题标题】：How to show twitter bootstrap modal via JS request in rails?如何通过 Rails 中的 JS 请求显示 twitter 引导模式？
【发布时间】：2011-12-16 03:28:47
【问题描述】：

我想显示一个 twitter 引导模式作为对 JS 请求的响应。我的 show.js.erb 函数看起来像这样：

$(document).ready(function() {

    $('#dialog').modal('show')

});

这里的“对话框”是模态的 id。模态代码本身看起来像这样：

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">&times;</a>
          <h3> Showing Modal </h3>
    </div>
    <div class="modal-body">
        I need to show up!
    </div>
    <div class="modal-footer">
        <a href="#" class="btn primary">Done</a>
    </div>
</div>

我确定的一件事是正在调用 javascript。我可以让它改变页面上的项目。另一件事是模态工作正常。当我使用 HTML 按钮触发这样的请求时，它显示得很好：

<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>

知道为什么模态不会出现在 JS 请求中吗？

谢谢！

【问题讨论】：

标签： javascript ruby-on-rails modal-dialog

【解决方案1】：

我有一个类似的问题，我稍微扭转一下就解决了

我的模态 div 是在调用页面（从部分）上呈现的，而不是由 JS 请求的响应：

<div class="modal hide fade" id="modal-window">
  <div class="modal-header">
    <a href="#" class="close">×</a>
    <h3>Loading...</h3>
  </div>
  <div class="modal-body center">
      <%= image_tag "loading.gif" %>
  </div>
  <div class="modal-footer">&nbsp;</div>
</div>

我使用这个链接依赖rails和Twitter不显眼的JS：

<%= link_to negotiation.name, negotiation_path(negotiation), {:remote => true, 'data-controls-modal' =>  "modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>

我的 show.js.erb 看起来像这样（缩短）

$('.modal-body').html('<%= escape_javascript(render :partial => 'negotiationdetail', :object => @negotiation) %>');
$('.modal-header').remove(); // don't need a header here

这很好用，并且可以在填充模式时向用户显示“加载”动画。

【讨论】：

使用 Bootstrap2，这个 link_to 对我有用： true, 'data-toggle' => 'modal', 'data-target' => "#modal-window", 'data-backdrop' => true, 'data-keyboard' => true} %>
干得好，先生们。次要点：'data-keyboard' 和 'data-backdrop' 在 2.0 中默认为 true，因此除非设置 = false，否则不需要。
非常感谢。这也对我有用。在带有引导程序 2 的 rails 3 中，link_to 可以写为：：btn，：data => {：toggle =>：modal，：remote => true , :target => "模态窗口" } %>
谁能确认上述解决方案也适用于 Rails 4 和 Bootstrap 3？因为对我来说不是。
这对大多数人来说可能很明显，但对于我们这里的菜鸟来说，show.js.erb 文件应该保存在 views 文件夹中，而不是 assets 文件夹中。

【解决方案2】：

我遇到了这个问题，我通过将 javascript 渲染更改为：

    $("#modal-window").find(".modal-content").html("<%= j (render 'new') %>");
    $("#modal-window").modal();

和模态窗口：

    <div id="modal-window" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content"></div>
      </div>
    </div>

你可以在这里查看更详细的解释https://kolosek.com/rails-creating-modals

【讨论】：

【解决方案3】：

该代码看起来应该可以工作（我正在做类似的事情，我在准备好的文档上显示模式）。

检查您是否正在加载 bootstrap-modal.js 并确保它在您的自定义 JS 加载之前加载。如果您的自定义 JS 先加载，您将看到此行为。

【讨论】：

【解决方案4】：

我也遇到了同样的问题，已经解决了

加载 jquery 文件（例如 jquery_171_min.js）
然后加载较少的js和css和
加载 bootstrap-modal.js

尝试这个序列。希望它有效。

【讨论】：

【解决方案5】：

这个例子效果很好。

<body>
    <div id="top"> 
       <a tabindex="-1" href="metadata.html" id="metadata-link" data-target="#modal" data-toggle="modal">Metadata</a>
    </div>

    <div id="modal" class="modal hide fade in" style="display:none;">
      <div class="modal-header">header<a class="close" data-dismiss="modal">x</a></div>
      <div class="modal-body"></div>
      <div class="model-footer">footer</div>
    </div>

 <script>

  $(document).ready(function() {
     $('#top').find('a').trigger('click');

    });
 </script>
</body>

最好的问候。

【讨论】：

【解决方案6】：

我遇到了这个问题，

我的原因是将模态完全设置在部分文件中，并将触发器（按钮/链接）从其他视图文件中调用模态。

假设触发按钮在我的索引视图页面中，我在 _form.html.erb 文件中构建模式；我想使用该模式从索引页面创建一条新记录。

解决方案：

在与触发器相同的文件中创建具有“id”的最外层 div

index.html.erb - 触发按钮

<h3>
  <%= link_to 'Add Category',
    new_todo_path,
    remote: true,
    class: "btn btn-lg btn-success",
    data: {toggle: "modal", target: "#modal_form_category"} 
  %>
</h3>

index.html.erb - 模态框的最外层

<div id="modal_form_category" class="modal fade" role="dialog">
</div>

new.js.erb

$(document).ready(function() {
  $("#modal_form_category").html("<%= j render "form" %>");
});

P.S：请原谅 new.js.erb 在页面准备好之前，我没有绝对的理由封闭代码。我想即使没有 ready 功能它也能工作；如果您知道是否有必要，请告诉我。

【讨论】：

【解决方案7】：

我不知道 jquery 的“模态”功能。看起来您正试图让 element#dialog 显示出来。你可以这样做：

$("#dialog").show();

还是我完全错过了这个问题？

【讨论】：

谢谢，虽然我认为这不是正确的答案。在此处查看模态的简要文档可能会有所帮助：twitter.github.com/bootstrap/javascript.html
非常感谢 jBeans！为我工作。