我正在看这个页面(
http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/)它显示了一些代码,但我不明白我如何将它实现到我的应用程序.
我使用Rails3.2,Bootstrap.css和JQuery.
有人能告诉我究竟需要做些什么来显示带有bootstrap模式的“删除确认对话框”吗？
更新：
资产/ Java脚本/ application.js中
// This is a manifest file that'll be compiled into application.js,which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory,lib/assets/javascripts,vendor/assets/javascripts,// or vendor/assets/javascripts of plugins,if any,can be referenced here using a relative path. // // It's not advisable to add code directly here,but if you do,it'll appear at the bottom of the // the compiled file. // // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED,ANY BLANK LINE SHOULD // GO AFTER THE REQUIRES BELOW. // //= require jquery //= require jquery-ui //= require twitter/bootstrap //= require_tree . //= require jquery.ui.datepicker //= require autocomplete-rails
解决方法
The blog entry使用coffeescript.假设您在rails表单中使用：confirm选项,那么您需要覆盖Rails中的默认操作,方法是将以下代码放在资产管道中的< controller> .js.coffee文件中(app / assets / javascript )：
$.rails.allowAction = (link) ->
return true unless link.attr('data-confirm')
$.rails.showConfirmDialog(link) # look bellow for implementations
false # always stops the action since code runs asynchronously
$.rails.confirmed = (link) ->
link.removeAttr('data-confirm')
link.trigger('click.rails')
$.rails.showConfirmDialog = (link) ->
message = link.attr 'data-confirm'
html = """
<div class="modal" id="confirmationDialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>#{message}</h3>
</div>
<div class="modal-body">
<p>Are you sure you want to delete?</p>
</div>
<div class="modal-footer">
<a data-dismiss="modal" class="btn">Cancel</a>
<a data-dismiss="modal" class="btn btn-primary confirm">OK</a>
</div>
</div>
"""
$(html).modal()
$('#confirmationDialog .confirm').on 'click',-> $.rails.confirmed(link)
然后,您可以在视图中使用此类链接,它们应显示Bootstrap模式而不是标准浏览器弹出窗口：
<%= link_to 'Delete',item,:method => :delete,:confirm=>'Are you sure?' %>
UPDATE
这适用于我使用：remote =>真正的选择.
因此,如果我在index.html.erb视图中有类似以下内容：
<table>
<tr>
<th>Name</th>
<th>Title</th>
<th>Content</th>
<th></th>
<th></th>
<th></th>
</tr>
<% @posts.each do |post| %>
<tr id="<%= post.id %>">
<td><%= post.name %></td>
<td><%= post.title %></td>
<td><%= post.content %></td>
<td><%= link_to 'Show',post %></td>
<td><%= link_to 'Edit',edit_post_path(post) %></td>
<td><%= link_to 'Destroy',post,method: :delete,:remote => true,data: { confirm: 'Are you sure?' } %></td>
</tr>
<% end %>
</table>
并且控制器中的destroy动作在respond_to中有format.js：
# DELETE /posts/1
# DELETE /posts/1.json
def destroy
@post = Post.find(params[:id])
@post.destroy
respond_to do |format|
format.js
format.html { redirect_to posts_url }
format.json { head :no_content }
end
end
这在destroy.js.erb中：
$("tr#<%= @post.id %>").fadeOut();
一切都行之有效.单击“销毁”链接时,将弹出“引导程序确认”对话框,单击“确定”后,该行将淡出并在服务器上销毁.