如何在Rails中通过JS请求显示Twitter Bootstrap模态? [英] How to show twitter bootstrap modal via JS request in rails?
问题描述
我想显示一个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">×</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"> </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 Bootstrap模态?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!