Simple global Ajax activity indicator with jQuery
Posted on 27/6/07 by Felix Geisendörfer
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:
var $headline = $('h1:first');
$(document).ajaxSend(function() {
$headline
.removeClass('activity')
.addClass('activity');
});
$(document).ajaxStop(function() {
$headline.removeClass('activity')
});
});
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
Did you like this blog post? If so, please consider subscribing to the Blog RSS feed.
You can skip to the end and add a comment.
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 :)
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.
Felix, the link to the Containeable behavior is wrong. Also, you DO plan to change the name as we discussed, right? ;)
Mariano: Link fixed. Other then that: The force DOES NOT help YOU when trying to manipulate ME ... : ).
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!
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.
Hello,
I am interested about your host unlimited bandwidth? care to share?
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.
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 :)
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 :
Hey, here's an idea, jQuery script kiddie: instead of using removeClass() in the send function, you can use one of the first and most basic statements in programming, an IF STATEMENT. Amazing isn't it?
You jQuery groupies have lost all touch with good programming. Some of you I suspect have never even used javascript on it's own!
You call your code small and robust as if you don't need to add to it a huge 4-5kb library, filled with functions you don't use.
bit: Thanks for your suggestion.
What is good programming? Making everything as fast as possible? Or making everything as simple as possible? Your suggestion is indeed valid and one could say that CPU cycles are being wasted here. So if you are going to use this in a senario with more then ... I guess 30 AJAX requests / second you should indeed go ahead and apply your optimization! Cheers mate, stay happy ; ).
This post is too old. We do not allow comments here anymore in order to fight spam. If you have real feedback or questions for the post, please contact us.
Good stuff!
Also that ajax indicators list is great. Thanks for sharing!