Question

There are several posts relating to this, but none actually gives a solution.

What actually happens is as follows:

function LoadSpinner()
{
$("#divSpinner").css('display','block'); // could have done with .show()
}
function UnloadSpinner()
{
$("#divSpinner").css('display','none'); // could have done with .hide()
}

function OnClickMyButton()
{ 
 LoadSpinner();
 AnAjaxCall(); // it's set to async: false, that means the ajax call must finish before execution continues
 UnloadSpinner();
}

I tried commenting the UnloadSpinner() and it does show in IE 8. Could it be that it happens so fast that I don’t see it. But I am not too sure about that, cause even for some slower operation it does not show up.

It’s working fine on Firefox though.

Answer 1

Is the issue that you’re doing a synchronous ajax call? I believe this freezes the browser from executing any other actions including repainting the screen to show your spinner. Try making your ajax call asynchronous and hide the spinner in the callback. I bet you that works. Something like this:

function OnClickMyButton()
{ 
 LoadSpinner();
 AnAjaxCall(function() { UnloadSpinner() } );
}

function AnAjaxCall(callback)
{
  //do ajax. On complete, call callback. check the web for examples.
}

I would bet you the issue has nothing to do with jquery, but with the synchronous ajax call.

To test my theory try this code:

function OnClickMyButton()
{ 
 LoadSpinner();
 setTimeout(function() { UnloadSpinner() }, 2000);
}

I bet you the spinner appears for 2 seconds just fine. If it doesn’t then ignore this post.. I’m completely wrong.