The Simplicity of AJAX in Rails

I thought I would take a moment and show you all just how easy these fancy AJAX interface tricks are with Ruby on Rails and some javascript libraries. With all my years of web development experience, I never really learned learned javascript properly. (I just borrow code from the online examples.) But RoR makes this stuff a breeze!

The real benefit to using this method is that when the user makes their selection, I don’t need to send them an entirely new web page. Instead, the “smart” (read: javascript equipped) web page actually makes an HTTP request to the server in the background. The server then responds with an HTML fragment that is then dropped inside a DIV element (replacing its prior contents, if any). As the programmer, I usually only need to make calls to the Rails “helper” methods which in turn spit out (still) very simple calls to the included javascript libraries. Why is this so cool? Because I can make a snappy-quick interface without sending down the entire catalog, and with an absolute minimum of work!

For my example, I will point you to the Hardcore Racing eStore browse page.

Here’s what happens. The user picks an option from one of the three dropdowns. The busy indicator in the upper right corner immediately appears to show the user something is happening. If not for this, there would be no apparent indication that anything was happening. So, if the operation takes an unusually long time, they might think nothing is happening and try again.

To accomplish this, there are really only three parts, and the first one doesn’t count.

Part 1: Include the Javascript Libraries

I use a few other libs for this site, but these are the ones you’ll need. Include them between the HEAD tags in the layout template.

Part 2: The View

The view is the RoR template file. Similar to how PHP is embedded, a RoR view (.rhtml file) is html with embedded ruby (erb). Here’s an abridged version of what I’ve used:

   Busy...
Special Sections:

  
  Clearance Items
  Cars for Sale
  Featured Items

Here you can see the four important parts of the view. First, the busy div that has an animated gif. Notice that it starts with display: none. Next is the (“Special Sections”) dropdown. An interesting thing to note here is that a full-fledged form with FORM tags is not required since it is the javascript that has hooked the form element and it will not actually be a form submission.

The third chunk of code is a call to a Ruby on Rails helper. This helper outputs some calls to the javascript libraries that sets up all the magic on the client end. All I need to do is tell it the important bits: the div id to watch for changes, the div id (browse2_update, in the final bit of code) to update when the content comes back from the server, the RoR action method to call for the processing, the parameters to pass into the method, some javascript to execute once the request is initiated, and some javascript to execute once the request has returned and the div updated.

Part 3: The Processing Method

Even though it’s a bit outside the scope of this tutorial, I’ll post my browse_next_ajax method here. This method belongs in the controller class, which is the StoreController in my case.

1
2
3
4
5
6
7
8

def browse_next_ajax
  @cat  = Category.find(params[:id])
  @cats = @cat.sub_categories if @cat
  unless @cats && @cats.size > 0
    @redirect = true
  end
  render :partial => 'browse_next', :layout => false
end

I select out the category they’ve clicked on and find the categories underneath it. If there are categories, just spit back the partial template which will be replaced into the div. If there are no categories, I set @redirect = true so my partial template will instead spit out a javascript redirection that will take the browser to the product listing page.

Yep, it’s all so simple once you know how. I’m not really sure how easy other frameworks make this sort of thing, but I can’t imagine it could be any easier than this. Ruby on Rails gets two thumbs up.