Oct 26 2006

Ajax loading animation with JQuery and ASP.NET

Posted by admin under Ajax

Continued from part 2 of our serie on ASP.NET and JQuery. 

Now lets add some animation when we are doing the ajax calls.

First we add the image to the document - and place it where we want it to appear (in this example next to the minute label - which is the one to be updated)



    <td>Current minute is</td>

    <td><img id="loading" src="images/ajax-loader.gif">
<asp:Label ID="lblMinute" runat="server"></asp:Label></td>
..
..

Next - we look at the javascript part:



<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#loading').hide();
	$('#clickmeupdate').click(function() {
		MyUpdate();
	});
});


   
function MyUpdate()
{
$('#loading').show();
$('#lblMinute').html('');
 $.get("ajaxdata.ashx",function(xml){
   $('#lblMinute').html(xml);
    $('#loading').hide();
  });
 }
</script>

We start by hiding it in the document.ready function. Then when calling (in MyUpdate) we whow it (and also set the minute to blank), retrieve  the data - and in our callback when data has been retrieved we set the new data and hide the loading animation again.