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?