Using RedBox for modal dialogs
When I first saw Lightbox, my first thought (ok, second thought; my first was "This is awesome!(") was: "This would be a great technique for confirmation pages)" I never got around to using lightbox due to it's emphasis on images, but eventually other solutions started showing up, like GreyBox and ThickBox, that allowed you to use other content.
As I experimented with it, I decided that I really like the feel of using modal dialog boxes for confirmation messages. It is more consistent with the desktop experience, but not as constrained as popups on the desktop.
As I was using Redbox, I developed a pattern that works really well. Instead of limiting
:destroy requests to
POST, I modified them to return a delete confirmation page when called with a
GET, then perform the modification when called with a
The code to create the redbox link looks like:
link\_to\_remote\_redbox takes the same parameters as
link\_to\_remote, minus the
:update parameter that tells where to put the new content. Note the
:method => :get. By default, Ajax requests use
POST, but I don't want to
POST to the destroy action because that will perform the modification. I'm also setting
:href, which makes this link degradable.
As I used Redbox more and more for confirmation pages, it occurred to me that this method would also work really well for simple forms. So, with barely any modification—adding
respond\_to in the action and replacing
link\_to\_remote\_redbox—I was able to change these small forms into modal dialogs. Currently, the forms submit a regular request, but I could refactor it a little more and use Ajax to submit the forms and update the page.
Overall, I really like the feel of these modal dialogs. They make the app feel snappier and less daunting. Users don't have to jump all over the app for simple modifications. They spend the majority of their time on one page, the most important page.