Javascript 如何通过 Rails 中的 JS 请求显示 twitter bootstrap 模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8529420/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show twitter bootstrap modal via JS request in rails?
提问by Yusuf Saber
I want to show a twitter bootstrap modal as a response to a JS request. My show.js.erb function looks something like this:
我想显示一个 twitter bootstrap 模式作为对 JS 请求的响应。我的 show.js.erb 函数看起来像这样：
$(document).ready(function() {
$('#dialog').modal('show')
});
Here "dialog" is the modal's id. The modal code itself looks something like this:
这里的“对话框”是模态的 id。模态代码本身看起来像这样：
<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:
我确定的一件事是正在调用 javascript。我可以让它改变页面上的项目。另一件事是模态工作正常。当我使用 HTML 按钮触发这样的请求时，它显示得很好：
<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?
知道为什么模态没有出现在 JS 请求中吗？
Thank You!
谢谢你！
回答by Pierre
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 呈现在调用页面上（来自部分页面），而不是由 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>
I use this link to rely on rails and Twitter unobtrusive JS:
我使用这个链接来依赖 rails 和 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)
我的 show.js.erb 看起来像这样（缩短）
$('.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.
这工作正常，并且具有在填充模态时向用户显示“加载”动画的好处。
回答by Nesha Zoric
I had this problem and i fixed it by changing the javascript rendering to:
我遇到了这个问题，我通过将 javascript 渲染更改为：
$("#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
您可以在此处查看更详细的解释https://kolosek.com/rails-creating-modals
回答by Catherine Powell
That code looks like it should work (I'm doing something similar where I show the modal on document ready).
该代码看起来应该可以工作（我正在做类似的事情，我在文档就绪时显示模态）。
Check that you're loading the bootstrap-modal.js and make sure it's loading before your custom JS loads. If your custom JS is loading first, you'll see this behavior.
检查您是否正在加载 bootstrap-modal.js 并确保它在您的自定义 JS 加载之前加载。如果您的自定义 JS 首先加载，您将看到此行为。
回答by Anuja Deshpande Patil
I have face the same problem and it has been solved as
我遇到了同样的问题，已经解决了
- load the jquery files (for example jquery_171_min.js)
- and then load the less js and css and
- load the bootstrap-modal.js
- 加载 jquery 文件（例如 jquery_171_min.js）
- 然后加载较少的 js 和 css 和
- 加载 bootstrap-modal.js
try with this sequence.. Hope it works.
试试这个序列.. 希望它有效。
回答by Tabares
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.
此致。
回答by Rajan
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.
因此，假设触发器按钮在我的索引视图页面中，并且我在 _form.html.erb 文件中构建了模态；我想使用该模式从索引页面创建一个新记录。
Solution:
解决方案：
- create the outermost div which has the "id" in the same file as the trigger
- 在与触发器相同的文件中创建具有“id”的最外层 div
index.html.erb - trigger button
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 - outermost of the modal
index.html.erb - 模态的最外层
<div id="modal_form_category" class="modal fade" role="dialog">
</div>
new.js.erb
新的.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.
PS：请原谅 new.js.erb 在页面准备好之前，我没有绝对的理由封闭代码。我想即使没有 ready 函数也能工作；如果您知道是否有必要，请告诉我。
回答by andrewpthorp
I am not aware of a jquery "modal" function. It looks like you are trying to get the element#dialog to show up. You could simply do:
我不知道 jquery 的“模态”函数。看起来您正试图让 element#dialog 显示出来。你可以简单地做：
$("#dialog").show();
Or am I totally missing the question?
还是我完全错过了这个问题？
