Question

I did some research, but I couldn’t reach the answer for my problem. I want to have a loading image when I am clicking on a tab from my menu item. The following piece of code works great for specific events such as click() etc. (I have tried some other several examples), but it doesn’t when my gridview is loading. I was wondering, is there any kind of event in jquery (I haven’t find any) that reffers to when a control/entity STARTS to perform loading? I mean load(),onload(),ready() – all refer to the moment when the loading has finished.

Here is my code. Any help/suggestion is kindly appreciated:

<script type="text/javascript">
    $(document).ready(function () {
        $("#spinner").bind("ajaxSend", function () {
            $(this).show();
        }).bind("ajaxError", function () {
            $(this).hide();
        });
    });
</script>

Also,

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnSave,#btnOne,#btnTwo,#btnThree,#btnFour,#btnUndo').click(function () {
            //$("#spinner").append('<img id="img-spinner" src="Images/ajax-loader-test.gif" alt="Loading.." style="position: absolute; z-index: 200; left:50%; top:50%; " />');
            $('#spinner').show().fadeIn(20);
        });
    });
</script>

And the Asp code:

<div id="spinner" class="spinner" style="display: none; width: 100%; height: 150%; position: absolute; z-index: 100; background-color: Gray; left: 0; top: 0; bottom: 0; right: 0">
     <img id="img-spinner" src="Images/ajax-loader-test.gif" alt="Loading.."         style="position: absolute; z-index: 200; left: 50%; top: 50%;" />
</div>

Thank you, in advance, for your help.

EDIT: I have tried changing my function into:

    $(document).ready(function () {
    $("#spinner").css.apply('display','none');
    });

and in my asp code I removed the display:none property, but it’s still not working and I haven’t got any clue what I am doing wrong.

Answer 1

I would add this code to your startup function:

$('body').ajaxStart(function() {
  $('#spinner').show();
});

$('body').ajaxComplete(function() {
  $('#spinner').hide();
});

That will show the div when the ajax call starts, and hide it when it completes.

To make the spinner show as the page loads initially, add this line to the document.ready:

$("#spinner").hide();

and take the “display: none;” off of the spinner div.