Browser "Busy State" with Ajax

Question

Hi All,

We've got an ajax request that takes approx. 30 seconds and then sends the user to a different page. During that time, we of course show an ajaxy spinner indicator, but the browser can also "appear" stuck because the browser client isn't actually working or showing it's own loading message.

Is there an easy way to tell all major browsers to look busy with a JS command?

Thanks, Chad

Answer 1

jquery?

$('html').ajaxStart(function() { $('#busyindicator').show(); } );
$('html').ajaxStop(function() { $('#busyindicator').hide(); } );

But maybe I'm not understanding your question. what does 'look busy' mean ? Do you mean get the browser's progress bar or native busy indicator active? Don't think you can do that...

Answer 2

Do you need to use AJAX in this situation? Could you instead post/put to another page whose whole purpose is to process the request and once finished redirect to the destination page?

You could still use some JS to pop the spinner, and since you're posting to another page, the brower will display its "native busy indicator". The browser should never show the middle page, once the request has been processed the response gets redirected to the destination.

Answer 3

You could set the CSS cursor property of body to 'wait'. With prototype this would be like:

$(document.body).setStyle({cursor: 'wait'});

I believe this is the jQuery code, someone please correct me if I'm wrong as I am not a jQuery expert:

$("body").css("cursor", "wait");

This will make the entire page show an hourglass mouse cursor on Windows and a spinning watch cursor on Mac OS.