How can I display 'Delete Confirm Dialog' with bootstrap's modal? not like browser's default

Question

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

Answer 1

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.