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

2022-01-17 00:00:00 ruby-on-rails modal-dialog javascript

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

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

});

这里的对话框"是模态的 id.模态代码本身看起来像这样:

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">&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 按钮触发这样的请求时，它显示得很好:

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>

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

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

谢谢！

推荐答案

我也遇到过类似的问题，稍作改动就解决了

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

我的模态 div 呈现在调用页面上(来自部分)，而不是由 JS 请求的响应:

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">&nbsp;</div>
</div>

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

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

我的 show.js.erb 看起来像这样(缩短)

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.

相关文章