Tuesday, November 15th, 2005

Ajax Activity indicators with Rails

Category: Examples, Ruby

<>p>One of the definite patterns in Ajax is the activity indicator, the tool that we use to let a user know that we are talking back to the server, at that point.

Thomas Fuchs of script.aculo.us has written up how to simply do this in a Rails-based application:

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.

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'});
  }
});

Rails Activity Indicator

Related Content:

  • Ruby on Rails – preparing for an enterprise invasion
    Ruby on Rails has been popular with developers, but now management tools and IDEs for RoR are emerging, which could propel the framework deeper into...
  • Ajax Learning Guide
    Chances are, you've been doing JavaScript and XML developer work in Lotus Domino for quite some time. This old/new approach is causing quite a stir in...
  • Ajax Learning Guide
    Are you a Web developer? The time has come to rethink your entire approach to developing Web applications. Find out about the Ajax approach...

Posted by Dion Almaer at 9:23 am
9 Comments

+++--
3.9 rating from 31 votes

9 Comments »

Comments feed

Anyone know where I can download an animated busy gif like the one shown above (osx-style) ?

Thanks,

Carl

Comment by Carl Youngblood — November 15, 2005

http://www.pickemgame.com/images/indicator.gif

Comment by xian — November 15, 2005

Or, you can just use the CSS “cursor:progress” attribute for the body or HTML object. This works at least in Mozilla, FF, and IE6. This is something users would be used to – an arrow with an hourglass (or similar, depending on platform) indicating the page is doing something but they can still work with it.

Comment by Greg Woolsey — November 16, 2005

This works for anyone using prototype.js, not just Ruby on Rails apps.

Works very well too, thanks for sharing!

Comment by Garret — November 17, 2005

Some animated gif for ajax:

http://www.sanbaldo.com/wordpress/1/ajax_gif/

Comment by Baldo — December 31, 2005

Are these images copyright free? I’m especially interested in the one from pickemgame.com. Thanks.

Tobin

Comment by Tobin — February 3, 2006

http://mentalized.net/activity-indicators/

Some more little activity indicators…

Comment by eddmun — March 11, 2006

I have a web app that makes many Ajax calls, and what I am finding is that the spinner image never goes away. Further investigation showed me that Ajax.activeRequestCount is failing to decrement. Is it supposed to by itself, or is this something I should be doing in my onComplete code?

Comment by Erich — August 31, 2006

i had the same problem, and after looking at the code, realised that the activeRequestCount property seems to only apply if you use
Ajax.Responders.register()

to register a responder on the global Ajax object. At least that worked for me, ymmv. good luck

Comment by milton — October 20, 2006

Leave a comment

You must be logged in to post a comment.