JQuery .show() and equivalent CSS modification not working with IE 8

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

$(function() {
  $("#d").hide();
  $('#b').click(function() {
    $('#d').show();
  });
});

<div id="d">hello</div>
<input type="button" id="b" />

Works fine for me in IE.

Answer 2

Do you have a specific example ? I don't recall encountering that problem despite I use show() quite often.

Answer 3

I have done a bit of debugging on it and found that the Browser wasn't doing the necessary updates on time. That is why by the time it was suppose to be visible, the Unloader() was called and it got hidden again.

Answer 4

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.