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

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/