Simple global Ajax activity indicator with jQuery

Posted by Felix Geisendörfer, on Jun 27, 2007 - in JavaScript & jQuery

Hey folks,

I'm currently doing something very cool which I intend to write about in great detail later on. I'm refactoring all JS for my current web app (the secret one that was supposed to launch like 3 month ago ^^) from an MVC-ish class approach to jQuery plugins. It's gorgeous!. My code is getting smaller, easier to read and more robust. I really can't await writing a more lengthy post about this topic and why I believe that JS is one of the hottest languages these days but requires a different mindset then what we are used to from PHP and other scripting languages.

Anyway, back to the topic. One of the things I just refactored was the code I use to display a little ajax activity indicator so Users know when the app is working on somethings for them. Since the result is a pretty generic little script I thought it might be interesting for others to look at:

javascript
  1. $(function() {
  2.     var $headline = $('h1:first');
  3.     $(document).ajaxSend(function() {
  4.         $headline
  5.             .removeClass('activity')
  6.             .addClass('activity');
  7.     });
  8.     $(document).ajaxStop(function() {
  9.         $headline.removeClass('activity')
  10.     });
  11. });

Notes: I don't use the $headline variable out of PHP habits but as a mean to indicate jQuery objects throughout my application. The 'removeClass' call in the ajaxSend closure is neccessary since otherwise you might add the 'activity' class twice to the $headline if two requests are going on at the same time which is something I usually try to avoid.

In the application you can then see a little ajax spinner show up whenever requests are taking place:

I hope some of you find this little snippet useful ; ).

Some unrelated news: I don't know how many unique downloads my svn screencast received but my stats say it swallowed around 250 GB in traffic which is sort of nuts. When I found out about it I was kind of scared for a second but then remembered that I recently upgraded my web hosting plan to one where I have unlimited traffic - which saved me 100 euros in bandwidth fees ; ).

So stay tuned for upcoming stuff like the finished Containable behavior, some other code and posts I got in my backlog as well as the launch of my little web application.

-- Felix Geisendörfer aka the_undefined

Print this Post | Digg This | Stumble It | Delicious

11 Comments

Tim Koschuetzki on Jun 27, 2007:

Good stuff!

Also that ajax indicators list is great. Thanks for sharing!

Grant Cox on Jun 27, 2007:

For future screencasts perhaps have a direct link to download the FLV. I watched it once, then closed the browser tab. I went to show a colleague and it re-downloaded the lot (I hadn't even closed the browser). And finally I downloaded the FLV myself for future reference.

So that's 360MB from me :)

Felix Geisendörfer on Jun 27, 2007:

Grant: Haha, I guess you were not the only one playing this game ; ). A download link is a good idea so. Will add one now.

Mariano Iglesias on Jun 28, 2007:

Felix, the link to the Containeable behavior is wrong. Also, you DO plan to change the name as we discussed, right? ;)

Felix Geisendörfer on Jun 28, 2007:

Mariano: Link fixed. Other then that: The force DOES NOT help YOU when trying to manipulate ME ... : ).

Welja on Jun 28, 2007:

I am very curious about you're JS approach because now that i finally 'mastered' php and cake, the cool JS stuff is a bit of a messy heap in my projects. So i hope that you find the time soon :)

Why not put the screencasts on YouTube?

Thanks for the great posts, i always read you're stuff!

Garret on Jun 28, 2007:

Yahoo has a great Javascript lecture video series over at Yahoo UI. http://developer.yahoo.com/yui/theater/. Douglas Crockford, Yahoo's resident javascript expert gives the lectures. They're a bit dry at points but I learned a ton of things about javascript that I didn't already know.

Francis on Jun 28, 2007:

Hello,
I am interested about your host unlimited bandwidth? care to share?

Felix Geisendörfer on Jul 03, 2007:

Welja: Quality. I don't think YouTube let's you have good quality 800x600 video on their site.

Garret: I watched some of those, definitely recommend them too. But Crockford is not that great of a public speaker as he is a JS guru ; ).

Francis: It's a German company called all-inkl.com and they're truly awesome. It's shared hosting but it withstood 2 digg.com front page hits, they're support is *outstanding^3* and accessing them in the USA is super fast as well (see this site). So go ahead an check them out here, I use their 7,95 € / month package.

GreyCells on Jul 04, 2007:

Hi Felix

I'm with Welja - the JS structure in my apps are shameful and I desperately need some help to wrench control from the dark side.

With a teaser like: "It's gorgeous!", it's positively cruel to not follow the great FOSS tradition - release early, release often :)

Phil on Nov 23, 2007:

Hi,

I included your "Global AJAX activity indicator" script in the section of my PHP script as:

$(function() {
var $headline = $('h1:first');
$(document).ajaxSend(function() {
$headline
.removeClass('activity')
.addClass('activity');
});
$(document).ajaxStop(function() {
$headline.removeClass('activity')
});
});

The PHP page takes almost 16 to 17 secs to load....and while it's loading, it does not show up the "ajax spinner" as an activity going on.

I also tried calling the script's function in the as :

Add a comment