CODEDIGEST
Home Articles CodeDigest Tutorials FAQs
Home > CodeDigest >  
Technologies
 


Display Loading/Progressing image for jQuery Ajax methods in Asp.Net
Submitted By Satheesh Babu B
On 2/10/2010 9:59:58 AM
Tags: Ajax,asp.net,CodeDigest,jQuery  

Display Loading or Progressing image for jQuery Ajax methods in Asp.Net - A jquery equivalent of UpdateProgress Control


ASP.Net AJAX includes UpdateProgress control to show progress message or image to inform the users that the ajax request is still in progress.
We can display such progress message or image using the ajax events present in jQuery library when making ajax request using jQuery in asp.net.

 

The below code helps you to do that,

 

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function() {

$("#btGetDate").click(function() {

 $.ajax({
 type: "POST",
 url: "/AjaxSample/GetDate.asmx/GetDateTime",
 data: "{}",
 contentType: "application/json; charset=utf-8",
 dataType: "json",
 success: function(msg) {
 $("#dvDate").html(msg.d);
 }
 });

 });

$("#loadimg").ajaxStart(function() {
$(this).show();
});

$("#loadimg").ajaxStop(function() {
$(this).hide();
});

});
</script>
</head>
<body>
    <form id="form1" runat="server">
    <img id="loadimg" style="display:none;" src="loading.gif" />
<div>
<div id="dvDate"></div><input id="btGetDate" type="button" value="Get Date" /></div>
    </form>
</body>
</html>


The above code will display the progress image for all the ajax request made in the form.

 

Happy Coding!!

Recent Codes
  • View All Codes..