We have learned how create and receive callbacks from server using JQuery in previous article. Now in this part we use Same $("#divId").Load() function. But with more interactive like having progress message while the callback load the data from server.
Here is only one change in this function from previous.
$("#divResult").load("InfoDisplay.aspx",
{ action: $("#TextBox1").val() },
function() {
$(this).slideDown();
showProgress(true);
});
Here is the function that will show some progress of callback
function showProgress(hide) {
var img = $("#imgLoading");
if (hide)
img.hide();
else
img.show();
}
Here is the image tag you can use to show some animation in gif image or some image with message of loading.
<asp:Image ID="imgLoading" ImageUrl="~/image/loading4.gif" style="display:none" runat="server" />
<div id="divResult" style="width:420px">
Here is the complete code of aspx page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="Script/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="Script/jquery-1.3.2.min-vsdoc.js" type="text/javascript"></script>
<title>Some more interactive example than simple load</title>
<script type="text/javascript">
function showDetails() {
var div = $("#divResult");
showProgress();
div.slideUp(function() {
div.load("InfoDisplay.aspx",
{ action: $("#TextBox1").val() },
function() {
$(this).slideDown();
showProgress(true);
});
});
}
function showProgress(hide) {
var img = $("#imgLoading");
if (hide)
img.hide();
else
img.show();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
Enter word to get Details:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<input type="button" id="btnGetDetail" value="Click me" onclick="showDetails();" /><br /
<asp:Image ID="imgLoading" ImageUrl="~/image/loading4.gif" style="display:none" runat="server" />
<div id="divResult" style="width:420px">
</div>
</form>
</body>
</html>
Rest code is as previous we are calling another page and loading the data into the div we can also do it with the same page also just call the same page url in the $("#DIV").Load() function.
I have added the project code in the attachment you can see how to deal with calling same page and loading the data into div by analyzing the parameter passed in $("#DIV").Load() function.
Download the Source code attached.
Happy Ajaxing....