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!!
|