How to display loading GIF Image In JQuery AJAX in ASP.NET

No.of Views14158
Bookmarked0 times
Downloads 
Votes1
By  RRaveen   On  23 Jul 2010 10:07:56
Tag : JQuery , AJAX
In this article discus, about to display the wait or loading GIF using JQuery with when you are call AJAX Load method.
emailbookmarkadd commentsprint

Images in this article missing? We recently lost them in a site migration. We're working to restore these as you read this. Should you need an image in an emergency, please contact us at info@codegain.com

 

Introduction

Today’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.

Conclusion

here 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.

 
Sign Up to vote for this article
 
About Author
 
RRaveen
Occupation-Software Engineer
Company-TGS
Member Type-Gold
Location-Singapore
Joined date-03 Jun 2009
Home Page-codegain.com
Blog Page-www.codegain.com
- B.Sc. degree in Computer Science. - 4+ years experience in Visual C#.net and VB.net - Obsessed in OOP style design and programming. - Designing and developing Network security tools. - Designing and developing a client/server application for sharing files among users in a way other than FTP protocol. - Designing and implementing GSM gateway applications and bulk messaging. - Windows Mobile and Symbian Programming - Having knowledge with ERP solutions
 
 
Other popularSectionarticles
    In this article I will demonstration to how to validate whether to check at least one checkbox is checked in the Gridview in ASP.NET using JQuery. The JQuery is significant library to manipulate client html and css with less line of code.Before Jquery come up we have used the pure JavaScript to implement this features. I will give the JavaScript code as well in end of this article.
    Published Date : 30/Dec/2010
    Today I have implemented to my project to check and uncheck all checkboxes within gridview in asp.net. So in this article we focus how to implement this features using JQuery with less code. And also I have given live demonstration as well you can try it in live.
    Published Date : 29/Dec/2010
    In this article, I will explain how to sort custom objects array using JQuery. Let’s say you have array with custom objects, the custom object has few attributes as well, so in this case, you may need to sort objects with different order with specific attributes.
    Published Date : 12/Jan/2011
    The JQuery is powerful library to manipulate client side HTML, CSS, object and etc. On this article I will explain how to sort element within array using JQuery. In this demonstration I will show sort for string and numeric elements.
    Published Date : 11/Jan/2011
    Today I have introduced the new features for CodeGain article submit page to count characters for description textbox with JQuery on time. The character counter is support to users to display how many characters have entered and how many chars remaining in live.
    Published Date : 25/Dec/2010
Comments
By:AidasDate Of Posted:11/16/2011 10:49:34 AM
Thanks
Thanks!
By:rahulpriyanDate Of Posted:9/4/2011 11:25:20 PM
Thanks a Lot
Thanks a Lot for this article.. Simple and Useful
By:dfghdfghDate Of Posted:8/19/2011 1:03:30 AM
dddd
asdfsdfsdfgsdfgsdfg
Leave a Reply
Title:
Display Name:
Email:
(not display in page for the security purphase)
Website:
Message:
Please refresh your screen using Ctrl+F5
If you can't read this number refresh your screen
Please input the anti-spam code that you can read in the image.
^ Scroll to Top