Global method for setting a wait cursor when POSTing or GETting web pages?

Question

We have a web application that is well established and has a few hundred screens. Some clients on slow connections are annoyed that when they submit a page, or when a page is loading, there's no indication that anything is happening (the cursor just remains a pointer).

This particularly seems to be an issue on Firefox ... which NEVER shows anything but a pointer (for most other sites too), IE7/8 show an hourglass sometimes, and Chrome always shows a pointer/hourglass combo while waiting. How can we always get a wait cursor or something similar without making a lot of changes across our pages?

Answer 1

You can try to use some Javascript AOP library and catch $.ajax (I think this is the low level call that all jQuery call go thru).
You will need to make sure that every page has the AOP init code.

Answer 2

Jess,

If you have a central script that makes the $ajax calls (if they are ajax), then you can use the beforeSend: method on the $ajax object to set an ajax style indicator. You would then remove this indicator in the success: method of the call.

here's the bare bones of the approach:

$.ajax({
    url: 'ajax/test.php',
    beforeSend: function() {
        $('.loading').html('some predefined loading img html');
    },
    success: function(data) {
    $('.result').html(data);
        // remove the loading image now
        $('.loading').html('');
        alert('Load was performed.');
    }
});

take a look at:

http://api.jquery.com/jQuery.ajax/

for full details. I know this works great as this is exactly the approach I use in my .net mvc apps.