IntroductionToday’s JQuery is most powerful library for web development GUI customization. Hence I would write another great article about how to display the wait or loading GIF using JQuery with when you are call AJAX Load method. Let’s say you have to load list of state based on your selected country. In this scenario, we can use the AJAX Load with div element. Now, let say we have to show the loading gif one we are select the country, then AJAX load has request to get the states content from the database. Here is followings steps will be happen internally 1. Something triggers AJAX request (select a country).
2. We put the loading image that asks for user patience to the place where we would later insert the loaded list of state list in the html element (div).
3. After remote content is fully loaded, the content will replace earlier div html by this new content. Note: before start the demonstration, you have to download JQuery library from jquery.com or you can point the Google JQuery API URL as well.
Now, design the page for load state list, when we select a country.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="CountryDemo.aspx.cs" Inherits="WebApplication1.CountryDemo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title></title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script></head><body><form id="form1" runat="server"><div><asp:DropDownList ID="DropDownList1" runat="server"><asp:ListItem Text="Singapore" Value="1"></asp:ListItem><asp:ListItem Text="USA" Value="2"></asp:ListItem><asp:ListItem Text="UK" Value="3"></asp:ListItem></asp:DropDownList></div><div id="mainContent"></div></form></body></html> Note:I have used JQuery library from Google API. What are the advantages of use Google JQuery URL ?Here whole details for this question. Now let’s write JavaScript code with JQuery library to load state once we select the a country <head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(function() {
$('#DropDownList1').change(function() {// here we have to load the state list$('#mainContent').load('http://localhost/page1.aspx?cid=' + $('#DropDownList1').val());
});
});
</script>
</head>Through the above code ,when we are select a country, then change event will raise and send country ID to server page1.aspx.Within the page1.aspx, will compose the state list as html format, finally will write as response to client. But here now you can’t see any loading or wait GIF image when you are select a country from country dropdown list.
Let’s see, how to implement that, just an additional line we have to add within above script.
<script type="text/javascript" language="javascript">
$(function() {
$('#DropDownList1').change(function() {// Here is magic line//i have used loading.gif image from images folder$('#mainContent').empty().html('<imge scr="../images/loading.gif"/>');// here we have to load the state list$('#mainContent').load('http://localhost/page1.aspx?cid=' + $('#DropDownList1').val());
});
});
</script>
In above code, i have added only this line to load GIF. $('#mainContent').empty().html('<imge scr="../images/loading.gif"/>');Once change event raised, GIF loading image wild add into div inner content, Once content from loaded from the server page, then .load() function would replace our loading image indicator with the loaded content.The $('#mainContent').empty() will clear inner html of the div,and then when we are call $('#mainContent').empty().html() method will add new element inside the div. Conclusionhere I have not give the sample project with article. because I have given core part of the implementation with this article. So I hope you able to catch and enjoy. |