Question

I want my users to see a spinner during ajax request. My spinner works perfectly on Firefox 13. However, in Chrome and IE9 it is not working, although my ajax request takes quite a time. Like 1,2 seconds.

$('#fileManager').on('click', '.navSpan', function() {

    /* show spinner */
    $('.fileManager-spinner').show();

    /* synchronous  ajax fetch and manipulation goes here */

    /* hide spinner when done */
    $('.fileManager-spinner').hide();
}

If I remove $('.fileManager-spinner').hide(); line, it becomes visible and starts spinning in Chrome and IE too. However, when that line exists,it is not becoming visible.

Or if I debug the code and pause execution between .show() and .hide(), it also stays on the screen. But as I said, in normal conditions, it is impossible to see the spinner.

This is the spinner.

<div class="fileManager-spinner" style="display: none;"></div>

Below is the spinner css.

.fileManager-spinner
{
    position:relative;
    top: 50%;
    left: 50%;
    margin-left: -50px; /* half width of the spinner gif */
    margin-top: -50px; /* half height of the spinner gif */
    text-align:center;
    z-index:1234;
    overflow: auto;
    width: 100px; /* width of the spinner gif */
    height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */  
    background-image: url(../../Images/fileManager/loader/loaderBig.gif);
    background-repeat:no-repeat;
}

What could be the problem ?

Thanks.

Answer 1

I guess from what you show here that you’re doing synchronous ajax queries. During this query, Chrome’s engine doesn’t leave the javascript thread and doesn’t update the screen.

You should use an asynchronous ajax request and simply remove the spinner in the callbacks.

Please note that synchronous ajax queries will be deprecated in next version of jquery (1.8).

You can use

// show spinner
$.ajax({
  url: "http://fiddle.jshell.net/favicon.png",
  // some things
}).done(function ( data ) {
  // remove spinner
});

See jquery ajax done, always and fail functions.