如何使用引导程序的模式显示“删除确认对话框"?不像浏览器的默认设置 [英] How can I display 'Delete Confirm Dialog' with bootstrap's modal? not like browser's default

问题描述

我正在看这个页面(http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/ )它在那里显示了一些代码，但我不明白如何实现它到我的应用程序.

我使用 Rails3.2、Bootstrap.css 和 JQuery.
有人能告诉我我必须做什么才能使用引导程序的模态显示删除确认对话框"吗?

更新:

assets/javascripts/application.js

//这是一个 manifest 文件，将被编译成 application.js，其中将包含所有文件//下面列出.////此目录中的任何 JavaScript/Coffee 文件，lib/assets/javascripts，vendor/assets/javascripts，//或者插件的 vendor/assets/javascripts，如果有的话，可以在这里使用相对路径引用.////这里不建议直接添加代码，但是如果添加，它会出现在底部//编译后的文件.////警告:第一条空行标志着要处理的内容的结束，任何空行都应该//遵循以下要求.////= 需要 jquery//= 需要 jquery-ui//= 需要推特/引导程序//= require_tree .//= 需要 jquery.ui.datepicker//= 需要自动完成导轨

解决方案

博客条目 使用coffeescript.假设您在 rails 表单中使用 :confirm 选项，那么您需要覆盖 Rails 中的默认操作，方法是将以下代码放入 <controller>.js.coffee 文件(app/assets/javascript):

$.rails.allowAction = (link) ->除非 link.attr('data-confirm') 返回真$.rails.showConfirmDialog(link) # 查看下面的实现false # 总是停止操作，因为代码是异步运行的$.rails.confirmed = (link) ->link.removeAttr('数据确认')link.trigger('click.rails')$.rails.showConfirmDialog = (link) ->message = link.attr '数据确认'html = """<div class="modal" id="confirmationDialog"><div class="modal-header"><a class="close" data-dismiss="modal">×</a><h3>#{message}</h3>

<div class="modal-body"><p>您确定要删除吗?</p>

<div class="modal-footer"><a data-dismiss="modal" class="btn">取消</a><a data-dismiss="modal" class="btn btn-primary confirm">OK</a>

"""$(html).modal()$('#confirmationDialog .confirm').on 'click', ->$.rails.confirmed(链接)

然后您可以在视图中使用这样的链接，它们应该显示 Bootstrap 模式而不是标准浏览器弹出窗口:

<%= link_to 'Delete', item, :method =>:delete, :confirm=>'你确定吗?％＞

更新

这对我有用 :remote =>true 选项也是如此.

因此，如果我的 index.html.erb 视图中有类似以下内容:

<tr><th>姓名</th><th>Title</th><th>内容</th><th></th><th></th><th></th></tr><% @posts.each 做 |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 =>真的，数据:{确认:'你确定吗?}%></td></tr><%结束%>

控制器中的destroy动作在response_to中有format.js:

 # 删除/posts/1# 删除/posts/1.json销毁@post = Post.find(params[:id])@post.destroyresponse_to do |格式|格式.jsformat.html { redirect_to posts_url }format.json { 头:no_content }结尾结尾

这在destroy.js.erb中:

$("tr#<%= @post.id %>").fadeOut();

然后一切正常.当您单击 Destroy 链接时，会弹出 Bootstrap 确认对话框，当您单击 OK 时，该行淡出并已在服务器上销毁.

I was looking at this page( http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/ ) It shows some codes in there but I don't understand how I can implement it to my app.

I use Rails3.2, Bootstrap.css and JQuery.
Can someone tell me what exactly I have to do to display 'Delete Confirm Dialog' with bootstrap's modal?

UPDATE:

assets/javascripts/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 uses coffeescript. Say you are using the :confirm option in your rails form, then you need to override the default action in Rails, by putting the following code in the <controller>.js.coffee file in your assets pipeline (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)

You can then use links like this in your view and they should display the Bootstrap modal instead of the standard browser pop-up:

<%= link_to 'Delete', item, :method => :delete, :confirm=>'Are you sure?' %>

UPDATE

This works for me using the :remote => true option as well.

So if I have something like the following in my index.html.erb view:

<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>

And the destroy action in the controller has format.js in the 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

And this in the destroy.js.erb:

$("tr#<%= @post.id %>").fadeOut();

Then it all works. When you click the Destroy link, the Bootstrap confirmation dialog pops up, and when you click OK, the row fades out and has been destroyed on the server.

这篇关于如何使用引导程序的模式显示“删除确认对话框"?不像浏览器的默认设置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！