AJAX Activity indicators with Rails 0.14.3

Step 1:

Create an element on the page that should be displayed while AJAX Requests are active. I mostly use an IMG element displaying an animated GIF file. Give this element an id="busy" attribute.

Step 2:

Create a file application.js in your public/javascripts folder (if you don’t already have one!), and be sure to use <%= javascript_include_tag :defaults %> in the HEAD section of your layout or view template to include the Rails-provided JavaScripts.

Insert the following code into the application.js file:

Ajax.Responders.register({
  onCreate: function() {
    if($('busy') && Ajax.activeRequestCount>0)
      Effect.Appear('busy',{duration:0.5,queue:'end'});
  },
  onComplete: function() {
    if($('busy') && Ajax.activeRequestCount==0)
      Effect.Fade('busy',{duration:0.5,queue:'end'});
  }
});

Step 3:

Enjoy!

Tweet This Post Digg This Post Share on Facebook