Custom confirmation in Rails

Here's a quick & dirty solution to have custom confirmation dialog in Rails.

You need to override default behavior with this script:

$.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')

Also, you need one of these, depending on the UI framework you use:

### Boostrap

$.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>Are you sure Mr. President?</h3>
           </div>
           <div class="modal-body">
             <p>#{message}</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)
### jQueryUI

$.rails.showConfirmDialog = (link) ->
  message = link.attr 'data-confirm'
  html = """
         <div id="dialog-confirm" title="Are you sure Mr. President?">
           <p>#{message}</p>
         </div>
         """
  $(html).dialog
    resizable: false
    modal: true
    buttons: 
      OK: ->
        $.rails.confirmed link
        $(this).dialog "close"
      Cancel: -> 
        $(this).dialog "close"
### Noty (http://needim.github.com/noty/)

$.rails.showConfirmDialog = (link) ->
  message = link.attr 'data-confirm'
  okButton =
    type: 'btn btn-primary'
    text: 'Ok'
    click: (noty) -> $.rails.confirmed(link); noty.close()
  cancelButton = 
    type: 'btn btn-danger'
    text: 'Cancel'
    click: (noty) -> noty.close()
  noty
    text: message
    buttons: [okButton, cancelButton]
    closable: false
    timeout: false
    modal: true
Published 2012-07-18 00:00:00 +0200 · Home
Assets.github.com%2fimages%2fgravatars%2fgravatar user 420
Daligou 2013-06-16 10:53:27 UTC

good...

Assets.github.com%2fimages%2fgravatars%2fgravatar user 420
Fabiano Atalla 2013-06-25 21:52:26 UTC

It works when link method is DELETE. I've spent hours till discover that! Nevertheless, it's a great article. Thanks.

Assets.github.com%2fimages%2fgravatars%2fgravatar user 420
Fabiano Atalla 2013-06-25 21:56:21 UTC

It works for other methods too, since we explicitly say that in link parameters! Nice!

Ea644e1f8f5cecd4651d7140c65bcfce?d=https%3a%2f%2fidenticons.github.com%2f3cc7cb77170a9e9b04bec81f11a0d642
Jeremy Kolb 2013-12-09 16:14:59 UTC

This doesn't seem to work with a link in a form with remote: true.

5368089?
YonHaime Rocha 2014-03-20 21:45:33 UTC

I used the same code to bootstrap but when I add the FADE class of bootstrap not work. for example:
Any idea?

5368089?
YonHaime Rocha 2014-03-20 21:45:56 UTC

I used the same code to bootstrap but when I add the FADE class of bootstrap not work. for example: ""
Any idea?

5368089?
YonHaime Rocha 2014-03-20 21:46:22 UTC

I used the same code to bootstrap but when I add the FADE class of bootstrap not work. for example: class="modal fade" id="confirmationDialog"
Any idea?