如何在rails中通过JS请求显示twitter引导模式

How to show twitter bootstrap modal via JS request in rails?

本文关键字：显示 请求 twitter 模式 JS rails      更新时间：2023-09-26

我想显示一个twitter引导模式作为对JS请求的响应。show.js.erb函数如下所示:

$(document).ready(function() {
    $('#dialog').modal('show')
});

这里的"dialog"是模态的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请求?

谢谢!

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

我的模态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} %>

and my show.js.erb看起来像这样(缩短)

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

这样做效果很好，并且可以在填充模态时向用户显示"加载"动画。

我有这个问题，我通过改变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

该代码看起来应该工作(我正在做类似的事情，我在document ready上显示模态)。

检查你正在加载bootstrap-modal.js，并确保它在你的自定义JS加载之前加载。如果你的自定义JS先加载，你会看到这个行为:

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

    加载jquery文件(例如jquery_171_min.js)
  1. 然后加载较少的js和css和
    2. 加载bootstrap-modal.js

试试这个序列…

这个例子运行得很好。

<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>

问好。

我遇到了这个问题，

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

假设触发器按钮在索引视图页面中我在_form。html中构造模态。erb文件;我想创建一个新的记录从索引页使用那个模态。

解决方案:

  • 在与触发器
    • 相同的文件中创建最外层的div，该div具有"id"

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。请原谅new.js.erb，在页面准备好之前，我没有绝对的理由把代码括起来。我想即使没有ready函数，它也能工作;如果你知道有必要，请告诉我。

我不知道jquery的"modal"函数。看起来您正在尝试让元素#dialog显示出来。您可以简单地执行:

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

还是我完全没抓住问题?

相关文章：