如何通过 Rails 中的 JS 请求显示 twitter bootstrap 模式？

发布于 2024-12-21 12:20:31 字数 924 浏览 2 评论 0原文

我想显示一个 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 请求上显示吗？

谢谢你！

原文

I want to show a twitter bootstrap modal as a response to a JS request. My show.js.erb function looks something like this:

$(document).ready(function() {

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

});

Here "dialog" is the modal's id. The modal code itself looks something like this:

<div id="dialog" class="modal hide fade">
    <div class="modal-header">
          <a href="#" class="close">×</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>

One thing I am sure of is that the javascript is being called. I can have it alter items on the page. Another thing is that modal is working fine. It shows up just fine when I use an HTML button to trigger the request like this:

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

Any idea why the modal doesn't show up on JS request?

Thank You!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

蓝海似她心 2024-12-28 12:20:31

我有一个类似的问题，我用一个轻微的扭曲解决了这个问题

我的模态 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"> </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

这工作正常，并且具有在填充模式时向用户显示“加载”动画的好处。

I had a similar problem, which I solved with a slight twist

My modal div is rendered on the calling page (from a partial) and not by the response of the JS request:

<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"> </div>
</div>

I use this link to rely on rails and Twitter unobtrusive 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 looks like this (shortened)

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

This works fine and has the benefit of showing a "loading" animation to the user while the modal is being populated.

回复收藏 0 原文

一场信仰旅途 2024-12-28 12:20:31

我遇到了这个问题，我通过将 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

I had this problem and i fixed it by changing the javascript rendering to:

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

And the modal window to:

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

You can check more detailed explanation here https://kolosek.com/rails-creating-modals

回复收藏 0 原文

毁梦 2024-12-28 12:20:31

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

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

回复收藏 0 原文

蘑菇王子 2024-12-28 12:20:31

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

加载 jquery 文件（例如 jquery_171_min.js）
，然后加载 less js 和 css 并
加载 bootstrap-modal.js

尝试使用这个序列。希望它能工作。

回复收藏 0 原文

不…忘初心 2024-12-28 12:20:31

这个例子效果很好。

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

此致。

This example works very well.

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

Best regards.

回复收藏 0 原文

忘东忘西忘不掉你 2024-12-28 12:20:31

我遇到了这个问题，

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

假设触发按钮位于我的索引视图页面中，并且我在 _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功能它也能工作；如果您知道是否有必要，请告诉我。

I had this problem,

the cause for me was setting the modal wholly in partial file and put the trigger (button / link) calling the modal from other view file.

So let say that the trigger button is in my index view page and I construct the modal in _form.html.erb file; And I want to create a new record from index page using that modal.

Solution:

create the outermost div which has the "id" in the same file as the trigger

index.html.erb - trigger button

<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 - outermost of the modal

<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: pardon the new.js.erb I have no absolute reason enclosing the code untill the page is ready. I guess it will work even without the ready function; if you know is it necessary or not please do tell me.

回复收藏 0 原文