How can I display 'Delete Confirm Dialog' using bootstrap modal? don't like the default browser

Question

I looked at this page ( http://lesseverything.com/blog/archives/2012/07/18/customizing-confirmation-dialog-in-rails/ ) Some codes are displayed here, but I don’t understand how to implement this for my application .

I use Rails3.2, Bootstrap.css and jQuery.
Can someone tell me what exactly I need to do to display the “Delete confirm dialog” using boot 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 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 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 

Answer 1

The blog uses coffeescript. Suppose you use the :confirm parameter in the form of rails, then you need to override the default action in Rails by placing the following code in the <controller>.js.coffee in the pipeline of your assets ( 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) 

Then you can use such links in your view, and they should display the Bootstrap modem instead of the standard browser popup:

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

UPDATE

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

So, if there is something like the following in my view of 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> 

And the destroy action in the controller has format.js in response_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 is in the destroy.js.erb file:

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

Then everything works. When you click on the Destroy link, a download confirmation dialog box appears, and when you click OK, the line disappears and is destroyed on the server.