Replace Rails confirm dialog with Bootboxjs

Today, I wanted to use Bootboxjs wonderful alert, confirm box in a project. Though it’s pretty easy to use separately, I, later, wanted to replace Rails default confirm dialog box with the same of bootboxjs. Rails default confirmation box is shown by its built in unobtrusive UJS library. At first, lets see how that works.

link_to 'Destroy', @post, :confirm => 'Are you sure?',:method => :delete, :class => 'btn btn-mini btn-danger'

This will generate markups that looks like:

<a class="btn btn-mini btn-danger" href="/posts/999" rel="nofollow" data-confirm="Are you sure?" data-method="delete">Destroy</a>

Now, when you click the Destroy link, it will first ask you with message “Are you sure?”. If you press “Ok” only then it will proceed. So, you get this confirmation box free :).

However, we are seeing this same confirm dialog for years after years and it’s too boring. I wanted to replace this using bootboxjs sexy dialog boxes that is based on Twitter Bootstrap. I’m already using twitter bootstrap for my project so I’m actually not adding that much overhead. You can include it easily using Twitter Bootstrap Rails gem.

When I wanted to override Rails confirm box, I found the a Gist that worked nicely out of the box.

But I wanted to apply custom css class to the Yes and Cancel button. I’ve seen I can’t do it for the bootbox.confirm() method. So, I need to use it lower level api (dialog()). Here is my modified version with custom classes.

If you are looking for coffeescript version, it is below. In fact, I’ve written in coffeescript and then converted it by js2coffee.org

Do you want to see how it actually look now? Here it is:

I just love it 😀