Loading animation while waiting for server-side code in IE

Question

I'm trying to show a loading animation while the user waits for a call to the server. To do this I tried showing a div with JQuery but it only works in Firefox (not in IE or Chrome).

Right now, the BigSlowFuncCall only has a c# System.Threading.Thread.Sleep(10000);

JAVASCRIPT

function showloading() {
  $('#content').hide();
  $('#siteLoader').show();
}

function hideloading() {
  $('#content').show();
  $('#siteLoader').hide();
}

function CheckFields() {
   showloading();

   var jsHandler = new JsonHandler();
   jsHandler.BigSlowFuncCall();

   hideloading();
}

HTML

<div id="wrapper">
    <div id="siteLoader" style="display:none;" > 
        <div id='siteDetailLoader'> 
            <img src='img/loading.gif' border='0' alt='cargando'> 
            Por favor, espera<br /> <br /> 
        </div>
    </div> 

    <div id="content">
        <form>
          <p>
              /* Stuff */
          </p>
          <p class="submit"><input type="button" id="btn" onclick="CheckFields()" class="button-link" value="Descargar"/></p>    
        </form>
</div><!-- #content-->

</div><!-- #wrapper -->

This works as expected on Firefox (hides the content, shows the loading animation and after 10s hides the loading animation) but in IE it only shows if I quit the hideloading() function and only after it exits the CheckFields function.

How can this so simple code work fine on Firefox but not on IE?

Edit: I saw that if I put an alert() after showloading() it works perfectly. So, I've searched and found this: Forcing a DOM refresh in Internet explorer after javascript dom manipulation. I tried this https://stackoverflow.com/a/4271996/1824011 but it didn't work either.

score 0 · Answer 1 · answered Jan 31 '13 at 12:15

0

May be it will help you;

function checkFileds()
{
    var overlay = jQuery('<div id="overlay" align="center"><img src="images/preloader_bajaj.gif" width="125" height="125"  style="margin-top:300px" /> </div>');
    overlay.appendTo(document.body)

.......your code.......

}

answered Jan 31 '13 at 12:15

Hunter

820
8
19

But how can I make the content hide? – Blodwen Jan 31 '13 at 12:33
document.getElementById("overlay").style.display="none"; – Hunter Jan 31 '13 at 13:05
I mean the content div that has to be hidden while waiting for the process to finish. I can't delete it because I may have to show it again. – Blodwen Jan 31 '13 at 13:55
document.getElementById("overlay").style.display="none"; will not delete it,.....if you want again to show that then you can use document.getElementById("overlay").style.display="block"; – Hunter Jan 31 '13 at 14:36
I've already tried using the display property to hide or show the div but it didn't work either. – Blodwen Feb 01 '13 at 09:37

score 0 · Answer 2 · answered Jan 31 '13 at 12:16

0

Are you missing something? The $ sign in the hide function is missing. IE is very sensitive in this type of error. Correct the code and try it.

answered Jan 31 '13 at 12:16

Sudip Pal

2,041
1
13
16

I introduced that bug when copying the code to the post. But thanks. – Blodwen Jan 31 '13 at 12:30

Loading animation while waiting for server-side code in IE

2 Answers2