twitter-bootstrap 导轨 4 引导程序 3 ajax 模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22143358/
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
rails 4 bootstrap 3 ajax modal
提问by drac
I'm busy learning Rails 4 and I would like to display a bootstrap popup modal when a user clicks on a link, when the modal opens it needs to show the information relating to that particular record. Heres what I have done so far, which just doesn't show the actual modal popup BUT does pass the correct parameters.
我正在忙于学习 Rails 4，我想在用户单击链接时显示引导弹出模式，当模式打开时，它需要显示与该特定记录相关的信息。这是我到目前为止所做的，只是没有显示实际的模式弹出窗口，但确实传递了正确的参数。
index.html.erb page has:
index.html.erb 页面有：
<%= link_to "view", work_path(w), remote: true, :"data-toggle" => 'modal', :"data-target" => '#myModal' %>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
I also have a works/_modal.html.erb:
我也有一个works/_modal.html.erb：
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body">
<%= @work.name %>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
also a works controller:
也是一个工程控制器：
def show
@work = Work.find(params[:id])
if request.xhr?
respond_to do |format|
format.html {render :partial => 'modal'}
format.json {head :ok}
end
end
end
and finally a works/show.js.erb:
最后是works/show.js.erb：
$("#myModal").html("<%= escape_javascript(render 'modal') %>");
I hope i'm missing something easy here. in the console I can see the following message so i know it is returning the correct information, but unfortunately it is not showing the modal.:
我希望我在这里遗漏了一些简单的东西。在控制台中，我可以看到以下消息，所以我知道它正在返回正确的信息，但不幸的是它没有显示模态。：
Started GET "/works/8" for 127.0.0.1 at 2014-03-03 09:31:12 +0000
Processing by WorksController#show as JS
Parameters: {"id"=>"8"}
Work Load (0.2ms) SELECT "works".* FROM "works" WHERE "works"."id" = ? LIMIT 1 [["id", 8]]
Rendered works/_modal.html.erb (4.9ms)
Completed 200 OK in 8ms (Views: 6.3ms | ActiveRecord: 0.2ms)
Any help on this is greatly appreciated.
非常感谢您对此的任何帮助。
回答by Bachan Smruty
Have a try with another way. In this way, we are going to show the modal popup using explicit javascript command.
用另一种方式试试。通过这种方式，我们将使用显式 javascript 命令显示模式弹出窗口。
In index.html.erb
在 index.html.erb
<%= link_to "view", work_path(w), remote: true, class: 'static-popup-link'%>
<div class="modal hide fade" id="myModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">Loading...</div>
In application.js
在 application.js 中
$(document).ready(function() {
var clickOnPopupLink = function(){
$('body').on('click', '.static-popup-link', function(){
$('#myModal').modal('show');
});
}
clickOnPopupLink();
});
In controller
在控制器中
def show
@work = Work.find(params[:id])
end
In show.js.erb
在 show.js.erb
$('#myModal').html("<%= j render("/works/modal")%>")
回答by Ishank Gupta
You also need to show the modal, add $('#myModal').modal('show')in show.js.erb
您还需要显示模态，添加$('#myModal').modal('show')show.js.erb
$("#myModal").html("<%= escape_javascript(render 'modal') %>");
$('#myModal').modal('show')
