How to display a loading icon on a table while waiting for an AJAX request to complete?

Question

I have a page that executes an ajax request to the server. the server returns the "row table" html code, then I put this code in the table.

here is an example server response

<tr> <td>This is a cell</td> <td>this is a second cell</td> <td>this is a third cell</td> </tr> 

On my page, when I want to download the results returned from the server, I have this code

 <table id="main"> <tbody id="results"> </tbody> </table> 

this is an example of my jquery

 $(function(){ $('#results').html(''); $.getJSON("ajax/loader-display-previos-calls.php", { account_id: <?php echo $account_id; ?> },function (data) { if ( ! data) return; $('#results').html(data.msg); } ).done( function(){ $('.sub_note').shorten({ moreText: 'read more', lessText: 'read less', showChars: '100' }); }); }); 

What I'm trying to do here is show the loading icon on top of an existing table. I'm looking for 1) put a transparent block to cover the whole table 2) put a download icon in the middle of this transparent block.

I tried this

 $('#results').html('<img src="images/ajaxSpinner.gif" alt="please wait..." style="width: 100px; position: absolute; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px;display: block;"/>'); 

The spinner icon appears in the center of the page.

Basically I want to show the current results using the download icon until the server sends a request.

How can I make the table and its contents transparent and then put the download icon in the center?

Answer 1

I think you are looking for ajaxStart () and ajaxComplete ()

Add this to your script inside:

 $(document).ready(function(){ ajaxStart(){ $('.mask').addClass('ajax'); } ajaxComplete(){ $('.mask').removeClass('ajax'); } }) 

And add this HTML tag anywhere:

 <div class="mask"> 

And add this to your CSS:

 .mask{ display: none; /*This hides the mask*/ } .mask.ajax{ display: block; width: 100%; height: 100%; position: relative; /*required for z-index*/ z-index: 1000; /*puts on top of everything*/ background-image: url (loading-icon.png); }