A nice delete confirmation modal in Rails courtesy of Bootstrap

rails_bootstrap_delete_confirmation_modal.md

Some CoffeeScript (verbosely commented for clarity)

# Override Rails handling of confirmation

$.rails.allowAction = (element) ->
  # The message is something like "Are you sure?"
  message = element.data('confirm')
  # If there's no message, there's no data-confirm attribute, 
  # which means there's nothing to confirm
  return true unless message
  # Clone the clicked element (probably a delete link) so we can use it in the dialog box.
  $link = element.clone()
    # We don't necessarily want the same styling as the original link/button.
    .removeAttr('class')
    # We don't want to pop up another confirmation (recursion)
    .removeAttr('data-confirm')
    # We want a button
    .addClass('btn').addClass('btn-danger')
    # We want it to sound confirmy
    .html("Yes, I'm positively certain.")
    
  # Create the modal box with the message
  modal_html = """
               <div class="modal" id="myModal">
                 <div class="modal-header">
                   <a class="close" data-dismiss="modal">×</a>
                   <h3>#{message}</h3>
                 </div>
                 <div class="modal-body">
                   <p>Be certain, sonny.</p>
                 </div>
                 <div class="modal-footer">
                   <a data-dismiss="modal" class="btn">Cancel</a>
                 </div>
               </div>
               """
  $modal_html = $(modal_html)
  # Add the new button to the modal box
  $modal_html.find('.modal-footer').append($link)
  # Pop it up
  $modal_html.modal()
  # Prevent the original link from working
  return false

A well-crafted link:

<%= link_to content_tag('i', '', class: 'icon-trash'), @something, confirm: "Are you sure you want to delete '#{@something.title}'?", method: :delete %>

This is some fancy stuff. I'm gonna have to dig into this.

Put me to sleep with your kind boots, mister fancy man.

Thank you very much! This works flawlessly.

Bootstrap places the modal near the top of the page on everything but the desktop view. Now I search to sort that out...

Very helpful! Thanks a lot!

Everything works fine except :remote => true. Any idea?

Just wanted to say, "Thanks." Worked like a charm, and I learned a bit at the same time.

The modal dialogue doesn't disappear while using remote link(i.e. remote: true) .

I had to add the following code after .removeAttr('data-confirm') line to get this to work with remote links.

# data-dismiss property is required for remote links
.attr('data-dismiss', 'modal')

It fails for me when calling $modal_html.modal(). After some googling, I found the jQuery-Plugin Simplemodal (http://www.ericmmartin.com/projects/simplemodal/) which provides that function.
It works now using this plugin - am I missing something or is it obvious for everyone else here that this is needed?

@chrisstr modal is part of Twitter bootstrap. If you've not already checked it out I highly recommend it.

Thanks for this awesome postpostmodern!

Thanks, this is awesome!!! o/

Is it just me or does the confirm button not work subsequent to clicking the cancel button the first time?

Is there anyway we can submit the form, in this case the "Delete" button just by hitting the "Enter" key?

Hey,

Also check out this gem that politely hooks into the Rails' UJS adapter (via the confirm event) without overriding its allowAction completely. :-)

Well done! I'm always thrilled to see drop-in solutions for rails. :)

this is fantastic! here is the updated modal to work with bootstrap 3.

# Create the modal box with the message
  modal_html = """
               <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">                
                    <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 do this?</p>
                   <p>There's no turning back.</p>
                 </div>
                 <div class="modal-footer">
                   <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                 </div>
               </div>
              </div>
             </div>  
               """

If anyone else has this problem, be careful about confirm on forms. This works great for links, but it doesn't work in you put the confirm on the submit button of your form.

I just noticed the same thing about putting the confirmation on a submit button of a form. It doesn't work.

Hi @maud, @webkhung I made this work by adding a dirty condition

  if element.get(0).tagName == "BUTTON"
    random_id = Math.random().toString(36).substring(7)
    $form = element.parent('form')
    $form.attr('id', random_id)
    $link.attr('onClick', "document.getElementById('#{random_id}').submit();")

This is the full snippet

.rails.allowAction = (element) ->
  # The message is something like "Are you sure?"
  message = element.data('confirm')
  # If there's no message, there's no data-confirm attribute,
  # which means there's nothing to confirm
  return true unless message
  # Clone the clicked element (probably a delete link) so we can use it in the dialog box.
  $link = element.clone()
  # We don't necessarily want the same styling as the original link/button.
  .removeAttr('class')
  # We don't want to pop up another confirmation (recursion)
  .removeAttr('data-confirm')
  #  We want a button
  .addClass('btn').addClass('btn-danger')
  # We want it to sound confirmy
  .html("Yes, I'm positively certain.")

  if element.get(0).tagName == "BUTTON"
    random_id = Math.random().toString(36).substring(7)
    $form = element.parent('form')
    $form.attr('id', random_id)
    $link.attr('onClick', "document.getElementById('#{random_id}').submit();")

  # Create the modal box with the message
  modal_html = """
               <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                  <div class="modal-content">
                    <div class="modal-header">
                   <p>#{message}</p>
                 </div>
                 <div class="modal-body">
                   <p>Are you sure?</p>
                 </div>
                 <div class="modal-footer">
                   <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
                 </div>
               </div>
              </div>
             </div>
               """
  $modal_html = $(modal_html)
  # Add the new button to the modal box
  $modal_html.find('.modal-footer').append($link)
  # Pop it up
  $modal_html.modal()
  # Prevent the original link from working
  return false

Does anyone know how to integration test this in rspec/capybara? I'm stuck:

scenario 'user can delete post' do
   ...
    visit posts_path
    click_link 'Delete'
    #page.driver.browser.switch_to.alert.accept <-- This no longer works because we overwrote it
    ...
  end