I can't seem able to find any sample on how to do this.

When user entered in the input text box and lost focus, the onblur event call and an animated gif display while validating against database.  Once done, hide animated gif.

   //show animated gif here???

   //Hide animated gif here???

}

 <input id="input" type="text" onblur="return getDesc(this)"/>

Hi,

try this, the ShowMessage function should be called when you start your server request.

function ShowMessage()
	if ((waitDiv=document.getElementById("wait"))!=null) { 
	  if (waitDiv.style){
		document.getElementById('wait').style.visibility = 'visible'
	  }
	}
}
<div id="wait" style="z-index:101; position:absolute; visibility:hidden; left:400px; top:300px;">
	<img border="0" src="../images/pleasewait.gif" Alt="wait" width="240" height="126">
</div>

OMG @ the colours man.  your eyes must be all over the place, maybe it's mine lol

but anyway

<script language="javascript" type="text/javascript">
function getDesc(input)
{   

   //whole object is passed in so no need to $get() anything
   //var obj = $get(input);

    //show animated gif here???

    document.getElementById('loading').style.display = 'block';
  
   retval = LocalService.GetTypeDesc(input.value, OnComplete, OnTimeout, OnError);    return true;

   //Hide animated gif here???

    document.getElementById('loading').style.display = 'none';

}

<input id="input" type="text" onblur="return getDesc(this)"/>
<img alt="Loading..." runat="server" id="loading" src="images/ajax-loader.gif" style="background-color: transparent;display:none" />
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

Setting it to visible="false" on the server causes the control to not be rendered on the page so JavaScript will be unalbe to locate it.  Also, the control's ID may be different than specified if you're using MasterPages

oh, didn't spot that return true; bit either

You'll need to put that after the ".style.display = 'none'; " bit

Thanks for the reply

I've tried that but still doesn't slove my problem.

<script language="javascript" type="text/javascript">
function getDesc(input)
{   

   //whole object is passed in so no need to $get() anything
   //var obj = $get(input);

    //show animated gif here???

        if ((waitDiv=document.getElementById("wait"))!=null) {
           if (waitDiv.style){
          document.getElementById('wait').style.visibility = 'visible'
                document.getElementById('loading').style.display = 'block';
                alert('aaa');
           }
         }  
   retval = LocalService.GetTypeDesc(input.value, OnComplete, OnTimeout, OnError);    return true;

   //Hide animated gif here???

    if ((waitDiv=document.getElementById("wait"))!=null) {
      if (waitDiv.style){
        document.getElementById('wait').style.visibility = 'hidden'
        document.getElementById('loading').style.display = 'none';
      }
    }
   
    return true; 
}

<div id="wait" style="z-index: 101; position: absolute; visibility: hidden; left: 288px;top: 8px;">
   <img alt="Loading..." runat="server" id="loading" src="images/ajax-loader.gif" style="background-color: transparent;display: none" />
</div>

if i run with the above sript with the alert, the alert('aaa') shows and i can see the GIF.  And then hide it when done.

How do i "postback"or tell the JS to "refresh" the page for the image to show while the function being process?

i tried document.location.reload(); and that didn't work well. 

ThankX