如何通过rails中的JS请求显示twitter bootstrap模式？
[英]How to show twitter bootstrap modal via JS request in rails?
问题描述
我想显示一个twitter bootstrap模式作为对JS请求的响应。 我的show.js.erb函数看起来像这样：
$(document).ready(function() {
$('#dialog').modal('show')
});
这里“对话框”是模态的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>
我确信的一件事是调用了javascript。 我可以让它改变页面上的项目。 另一件事是模态工作正常。 当我使用HTML按钮触发请求时，它显示得很好：
<button data-controls-modal="dialog" data-backdrop="true" data-keyboard="true" class="btn danger"> Show </button>
知道为什么modal没有出现在JS请求上吗？
谢谢！
7 个解决方案
解决方案1
38 已采纳 2011-12-23 07:29:52
我有一个类似的问题，我解决了一点点扭曲
我的模态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
这样工作正常，并且在填充模态时向用户显示“加载”动画的好处。
解决方案2
1 2018-02-06 12:34:36
我有这个问题，我通过将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查看更详细的说明
解决方案3
0 2013-08-01 21:04:41
这个例子效果很好。
<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>
最好的祝福。
解决方案4
0 2016-08-20 10:50:19
我有这个问题，
我的原因是将模态完全设置在部分文件中，并将触发器（按钮/链接）从其他视图文件中调用模态。
因此，假设触发按钮位于我的索引视图页面中，我在_form.html.erb文件中构建模态; 我想使用该模式从索引页面创建一个新记录。
解：
- 创建最外面的div，它在与触发器相同的文件中具有“id”
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" %>");
});
PS：请原谅new.js.erb我没有绝对的理由将代码封闭，直到页面准备就绪。 我想即使没有准备好的功能它也能工作; 如果您知道是否有必要请告诉我。
解决方案5
0 2011-12-22 21:08:56
该代码看起来应该可以工作（我正在做类似的事情，我在文档准备就绪时显示模态）。
检查您是否正在加载bootstrap-modal.js并确保在自定义JS加载之前加载它。 如果您的自定义JS首先加载，您将看到此行为。
解决方案6
0 2011-12-26 09:17:54
我遇到了同样的问题，它已经解决了
- 加载jquery文件（例如jquery_171_min.js）
- 然后加载较少的js和css和
- 加载bootstrap-modal.js
尝试这个序列..希望它的工作原理。
解决方案7
-5 2011-12-16 05:10:26
我不知道jquery“模态”功能。 看起来你正试图让元素＃对话框显示出来。 你可以这样做：
$("#dialog").show();
或者我完全错过了这个问题？
在Rails中提交bootstrap模态窗体后，如何显示有错误的模态？
[英]After submitting bootstrap modal form in Rails, how to show modal with errors?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.