ajax gif loader

can you tell me where and how to put an ajx loading.gif? my html code is below

<div class="searchbox">

    <input  id="Search" onkeyup="searchKeyUp(event)
     " name="Search" class="searchtextbox"/>

</div>
</td>

 <td width="57"><br> <img onclick="search(); return false;" style=" cursor:pointer" eight="30" onmouseover="this.src='images/j3.jpg'" type="image" src="images/j1.jpg"    onmouseout="this.src='images/s1.jpg';" alt="" width="57" ></td>
 </tr>
 </table&g开发者_运维知识库t; 
 <div> 
 <table cellspacing="0" cellpadding="0" border="0">

  <tr valign="left">

 <td><div class="resultCss" content="tableId" id='resultDiv'>

 </div></td>
 </tr>

        </table>   

Before your AJAX request starts , display the ajax_load.gif and after it ends, remove it.

Tip: Make sure you have only 1 AJAX request sent to your server at a time like https://www.buxfer.com

build in on the position you want to have it and give display:none on it. In search() before AJAX Call edit the display:none to block and hide the image onSuccess off the AJAX function again.

1. You need to place gif file to any proper place and set "display:none;"
2. You can use my function based on jQuery. It automatically shows or hide the spinner on every ajax call.

function simpleAjax(pageUrl , divId , spinnerId , formId , isFormEnabled) { var dataVar =''; var d = new Date(); if(isFormEnabled) dataVar = $('#'+formId).serialize();

$.ajax(
{
    type: 'GET',
    url: pageUrl,
    cache:false,
    data:dataVar,               
    success: function(response){ $('#'+divId).html(response); $('#'+spinnerId).hide(); },

    beforeSend: function(){ $('#'+spinnerId).show();},

    error: function(m){ alert(m); },

    complete: function(){}
});

}