Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A nice delete confirmation modal in Rails courtesy of Bootstrap

Here's what you get.

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 %>
@trey

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

@trey

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

@keilmillerjr

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

@kvet

Very helpful! Thanks a lot!

@chamnap

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

@coty

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

@kandadaboggu

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

@kandadaboggu

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')
@chrisstr

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?

@SirNerdBear

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

Thanks for this awesome postpostmodern!

@luizvarela

Thanks, this is awesome!!! o/

@findchris

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

@victorngkp

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

@vjt
vjt commented

Hey,

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

@chevinbrown

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

@kacole2

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>  
               """
@rnaud

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.

@webkhung

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

@hecbuma

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.