Have an image disappear after a table is loaded through jquery

Question

My main goal is to have a loading gif appear when a button is clicked and then disappear when the div is loaded with the information from a jquery function. The page doesn't load so I can't use the .load option and I can't figure out another way that works. Here is what I have...

In my index.php file I have a button set up like this:

<button id="btnQuery">Query</button>

And a div tag that holds my loading gif:

<div id="dvLoader" style="display:none;">
     <img src="..//images/loading.gif">;
</div>

I also have a div tag that is where I have info from a query being loaded too:

<div class="Info" id="Info"></div>

I then have jquery to handle when the button is clicked.

$('#btnQuery').click(function() {
    $('#dvLoader").show();
    var start_date = $('#startDate').val();
    var src = 'file.php?startDate='+start_date;
    $('Info').load(src);
}

dvLoader is showing when I click the Query button but not going away after the 'Info' div is loaded.

I've tried to make the image disappear when everything is loaded from the jquery function but nothing is working. Any suggestions?

Answer 1

.With regards to the page not loading, that could be a whole list of reasons, and without seeing the extended info on what teh page does, I cant help.

To answer your question on how to hide th eelement again after the load option has finished, you can do the following:

$('#btnQuery').click(function() {
    $('#dvLoader').show();
    var start_date = $('#startDate').val();
    var src = 'file.php?startDate='+start_date;
    $('.DumpInfo').load(src, function() {
        $('#dvLoader').hide();
    });;
}

The function passed will fire upon completion of the load, as described in the JQuery docs for load