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.