Global AJAX Cursor Change

I don’t know if I’ve ever mentioned this before, but in case I haven’t:

Something to this effect should be used on all AJAX web pages:

function globalAjaxCursorChange() 
{
  $("html").bind("ajaxStart", function(){
     $(this).addClass('busy');
   }).bind("ajaxStop", function(){
     $(this).removeClass('busy');
   });
}

Along with this CSS:

html.busy, html.busy * {
  cursor: wait !important;
}

The javascript above is jQuery, but I used to do the same type of thing back when I used Prototype.

Developers sometimes go to great lengths to supplement the native behavior of a system with custom ‘busy’ indicators. And that’s great, but don’t forget what’s built-in. Users instinctively know that something’s working when they see the old hourglass/watch cursor.


comment feed And the ensuing discussion…

  1. 1

    Jan 13th, 2009 at 4:16 am JP

    this is cool, I would have never thought of something this simple. I rely on the dreaded spinner in all my div, but i suppose changing the cursor is more intuitive.

    You may want to change your selector to “html” instead because the body only extends as far as the content, so on short pages the bottom of the page isn’t actually all “body” if you will.

    read this! http://phrogz.net/CSS/htmlvsbody.html

    Anyway great tip reguardless!!!

  2. 2

    Jan 13th, 2009 at 12:43 pm Jason Johnson

    Thanks, JP. I’ve updated the snippet accordingly. That was a good article.

  3. 3

    Apr 29th, 2009 at 7:13 am Paul Robinson

    I am not using jOuery but would like to apply this with my limited knowledge of Javascript. We have a Ruby on Rails application using Ajax which is quite slow as there is quite a bit of database queries and page building happening.

    Would I use the same snippets for prototype?

  4. 4

    Apr 29th, 2009 at 2:50 pm Jason Johnson

    Paul: It’s been a while since I used Prototype, but I think it would look something like this:

    // Global AJAX responders
    Ajax.Responders.register({ 
      onCreate: function() { 
        if (Ajax.activeRequestCount > 0) {
          $$('html')[0].addClassName('busy');
        }
      }, 
      onComplete: function() { 
        if (Ajax.activeRequestCount == 0) {
          $$('html')[0].removeClassName('busy');
        }
      } 
    }); 
    
  5. 5

    Aug 3rd, 2009 at 1:33 pm Lee Parker

    This is a great snippet of code. It worked well for our site except when there were multiple ajax requests fired off around the same time. The problem came in that when the first request finished, it would remove the ‘busy’ class even though another request was still in progress. jQuery provides two other events “ajaxStart” and “ajaxStop”. “ajaxStart” only happens when an ajax request begins and no other requests are currently in progress. “ajaxStop” only happens when the last concurrent request is finished. This worked out much better for our purposes.

  6. 6

    Aug 7th, 2009 at 7:26 am Jason Johnson

    @Lee - Good point. Thanks for the suggestion. I have updated the post accordingly.

  7. 7

    Sep 11th, 2009 at 12:22 pm Madison

    Hi,

    Please change the color of the orange text in the orange headers towards greater contrast. I totally missed ‘view plain’ and ended up cutting and pasting line numbers.

    • M
  8. 8

    Sep 16th, 2010 at 11:21 pm eric

    thank you this is totally simple and I had my busy / wait cursor in mere moments!

    Eric

  9. 9

    Sep 24th, 2011 at 5:07 pm Jeff

    Very elegant solution. Thank you!

  10. 10

    Mar 1st, 2012 at 3:53 pm poc

    I have attempted the same thing as mentioned but for some reason it doesn’t work for me. I have posted some code here. Please take a look and advise. http://stackoverflow.com/questions/9442269/change-the-wait-cursor-to-default-auto-after-the-ajax-call-is-complete-using-a

    Thanks much.

  11. 11

    Dec 18th, 2012 at 2:55 am Jonas

    I implemented the exact same solution, but I am having trouble with it. My cursor only change back when I move the mouse and stay in ‘wait’ until then.. Do you have the same behavior ?

Comments are closed.



Additional Resources


Tumblelog

Tumblr

Tumblr

Delicious

Delicious

Instructional

Recent Instructional Articles

Slicehost (and Linode) LAMP Cheatsheet

17.11
14

A quick list of steps I use to set up a LAMP server on Slicehost or Linode.

Terminal Tip: Prevent Creation of Mac Dot Files

07.08
0

An environment variable can prevent creation of ._filename files.

Terminal Tip: Delete Those Mac Dot Files

08.06
2

Use the find command to delete all of the ._* and .DS_Store files.

Editorial

Recent Editorial Articles

More Usable Mac: Finder Toolbar

05.12
1

I find it useful to keep a few extra items in my Finder toolbar.

No Multiple-Class Support in IE6

18.11
7

IE6 doesn’t respond to multiple class selectors.

New Skin for the Old Blogish

07.10
6

This blogish is finally back online after an extended period of http silence.

Downloadable

Recent Downloadable Articles

Gitup!

01.02
1

Gitup + Transmit = Really Simple Publishing

Leopard-Style iTerm Icon, Take 2

18.12
6

The newer, bluer version of the iTerm icon.

Leopard-Style iTerm Icon

05.12
4

An updated, Leopard-style icon for iTerm.

About This Site

About the Author

That’s me in the photo above. My current profession is web development. Therefore, it is the subject of this site.

Postpostmodern

Postpostmodern is the name of this site and my alias on most of the web. There's nothing really special about the name Postpostmodern. I studied art in college during the years after postmodernism, and nobody knew how else to classify the state of things other than silly words like postpostmodernism.

Sorta Blogish

I'd call this a blog, but I don't feel it fits the 'log' format. My goal is to publish articles on web-related topics that interest me, and while some articles may be time-sensitive, I would prefer that the organizational focus be on the categories and tags rather than chronology.

More Me

More about me can be found on the about page. Or, look me up in the usual places: