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:

  • 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...
  • 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...

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.