JavaScript Alert Dialog is ugly

Rails uses JavaScript alert by default for confirmations, and developers love using alert() because it is easy. Downside? I think it feels cheap. There are tons of solution out there, jQuery UI, ColorBox. In case you are using Twitter’s Bootstrap (isn’t it the best thing ever?), it’s pretty easy to replace using native JavaScript alert dialog with Twitter modal dialog.

Here is how I replace the alert() function using CoffeeScript:

# Public: Shows a modal dialog in replacement of JavaScript alert.
#
# title - Title on the dialog (required).
# message - Message on the dialog (required).
# label - Label for the dismiss button (optional).
#
# Returns jQuery Object for the modal dialog.
#
YourApplication.alert = (title, message, label) ->
  $alert = $('#application_alert')
  if $alert.length == 0
    html =  """
            <div class="modal hide fade" id="application_alert">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h3></h3>
              </div>
              <div class="modal-body">
                <p></p>
              </div>
              <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal"></a>
              </div>
            </div>
            """
    $alert = $(html).appendTo($('body'))
  $('h3', $alert).text(title)
  $('p', $alert).text(message)
  $('a', $alert).text(label || 'Close')
  $alert.modal('show')

So instead of calling alert(…), you can call YourApplication.alert(…).

Next thing is I want to replace JavaScript confirm with Bootstrap modal dialog:

# Extends Rails JavaScript to use modal dialog for confirm.
$.rails.allowAction = (element) ->
  message = element.data('confirm')
  title = element.data('confirm-title') || 'Are you sure?'
  ok = element.data('confirm-ok') || 'OK'
  # If there's no message, there's no data-confirm attribute,
  # which means there's nothing to confirm
  return true unless message
  $('#confirmModal').remove()
  # 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(ok)

  # Create the modal box with the message
  modal_html = """
               <div class="modal fade" id="confirmModal">
                 <div class="modal-header">
                   <a class="close" data-dismiss="modal">×</a>
                   <h3>#{title}</h3>
                 </div>
                 <div class="modal-body">
                   <p>#{message}</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

So now you can use the following in your erb file:

 <%= link_to "Jump", @jump,
      :confirm => "Are you sure you want to jump off the cliff?",
      :data => { :confirm_title => "Think Twice" , :confirm_ok => "Jump" } %>

I hope this helps.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s