.ajaxStart and .ajaxStop not firing

Question

Can someone please help me understand why this isn't working? The loading.gif appears while the ajax .load is loading the page, but doesn't ever go away. This leads me to believe that neither the .ajaxStart nor the .ajaxStop functions are being called (because it's also not hiding it initially either).

TIA!

The css:

#loadingDiv {
background-image: url('images/loading.gif');
height: 32px;
width: 32px;
margin: 50px auto 50px auto; }

The jquery:

<script type="text/javascript">
        $(document).ready(function()
            {
                $('#loadingDiv')
                    .hide()
                    .ajaxStart(function() {
                        $(this).show();
                    })
                    .ajaxStop(function() {
                        $(this).hide();
                    })
                ;
                $("#results").load("i/getAllInfo.class.php"); return false;
            };
    </script>

Answer 1

I know this is an old question, but I just fixed my own occurrence of this issue so I'm posting my solution: Basically, check your JavaScript for exceptions or syntax errors.

From the comments, it sounds like your issue was caused by a syntax error. For me, I had an exception in my ajaxSuccess handler, which prevented ajaxStop from firing. Then ajaxStart would not fire on subsequent ajax calls because ajaxStart only fires on the first ajax call of a batch. jQuery never received an ajaxStop, so it thought the batch was still running.

Answer 2

Do not chain it to loadingDiv.

Try this instead:

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

$.ajaxStop(function() {
   $('#loadingDiv').hide();
});

Answer 3

you don't need to return false from the document ready function but you do need to add the closing parenthesis ) like this

     $("#results").load("i/getAllInfo.class.php"); return false;
 }); //<----- you need the )

your url "i/getAllInfo.class.php" looks wrong.

try commenting out $(this).hide() in the .ajaxStop() like this:

.ajaxStop(function() {
     //$(this).hide();
})

Because its possible for it to show for so little time that you won't see it.

heres a fiddle for you: http://jsfiddle.net/GrsRT/11/