RJS Templates for Rails

Enhancing the Expense Tracker

The Expense Tracker currently uses an Ajax call in the background to add Expense objects to a Project. Although the form works and successfully adds expenses to a project, it could really use some enhancements. Next we're going to add an activity indicator to the page and later on we'll add a summary section that shows some statistics about the project.

Ajax Activity Indicator

One problem with Ajax is that it break a user's assumptions about how his web browser works. The user is used to having the entire page reload after performing an action that interacts with the server. With no indication that the page is busy, the user is left wondering what is going on. The user may also think that nothing is happening and repeatedly click the link or button, causing undesired effects.

One solution to this problem is to place some kind of indicator on the page that lets the user know that a remote call is in progress. In this example we'll use an animated GIF, but some descriptive text is also used. We can also disable the form while the request is in progress to prevent the user from accidentally clicking the submit button more than once.

We can do all of this by hooking into the JavaScript callbacks offered by the Ajax request. Rails lets you hook into the callbacks by passing in options to the remote call. The available callbacks are: :uninitialized, :loading, :loaded, :interactive, :complete, :failure, and :success. See the Rails documentation for more information ...