Show loading icon until table has loaded

Question

I have some javascript/jQuery that loads a table on the click of a search button and does not do a page load. Usually when I want to show a loading icon, I would dismiss it once the page has loaded... But there is no page load on this. The user could be on the page for 5 minutes before they search and when they click the search button, the loading icon would appear and once the table has loaded their results, it would dismiss...

Can anyone point me in the right direction to achieve this?

Answer 1

Place a Loading text/image in a div .

<div id="loading" style="display: none;">Loading..</div>

Control the appearance of above div With jQuery ajaxStart & ajaxStop methods.

$(document).ajaxStart(function(){
  $("#loading").show();
}).ajaxStop(function() {
  $("#loading").hide();
});

The above method triggers whenever there is an active AJAX call.