博客条目使用咖啡脚本。假设您正在使用:confirm
rails 表单中的选项,那么您需要覆盖 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?' %>
更新
这也适用于我使用该:remote => true
选项。
因此,如果我的 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>
控制器中的销毁动作在format.js
respond_to中:
# 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();
然后一切正常。点击Destroy
链接时,会弹出Bootstrap确认对话框,点击OK时,该行会淡出,已经在服务器上销毁。