Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save l0gicpath/3759588 to your computer and use it in GitHub Desktop.
Save l0gicpath/3759588 to your computer and use it in GitHub Desktop.
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 %>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment