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.

Continue reading →

jQuery Mobile: Part 3 – Modifying default ‘loading’ and ‘error loading page’ messages

In the second part of this series we have learned how to link pages. If you followed them, probably, you’ve also noticed that a ‘loading’ message while you are visiting pages back and forth. jQuery Mobile shows this while it loads the page behind the scene. Well, you may not see this in fast connection or during testing in your computer as it loaded too fast. Similarly, jQuery Mobile shows ‘error loading page’ when it fails to load any page.

In my application, I wanted to change these texts as I wanted them in Bangla.  We were seeing these because they are set by default in the framework. By modifying the default properties, we can change them to something we want.

To do so we will hook into jQuery Mobile’s ‘mobileinit’ event. This event (on document object) is triggered just on the moment jQuery Mobile is started to load. So, we will have to override these before loading jQuery Mobile library.

So far, we have loaded the library files in the following order:

Continue reading →