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

How to show twitter bootstrap modal via JS request in rails?(如何通过 Rails 中的 JS 请求显示 twitter 引导模式?)

问题描述

我想显示一个 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.

这篇关于如何通过 Rails 中的 JS 请求显示 twitter 引导模式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！