Navi's

Necessity, the mother of invention

  • Twitts

    • TCS gifts wristwatches to its workers, they don’t like it. Want jewellery, home instead a.msn.com/00/en-in/BBVYR… 4 days ago
    • RT @BBCHindi: अबू धाबी में पहले हिन्दू मंदिर का शिलान्यास वीडियो: रौनक कोटचा, अबू धाबी से, बीबीसी हिन्दी के लिए https://t.co/ARWFwzh1lO 5 days ago
    • RT @TimesNow: I worked in the interest of the nation and there has been an increase in the faith people have on my honesty: PM @narendramod5 days ago
    • RT @ANI: Priyanka Chaturvedi when asked on her recent song on Smriti Irani's degree, that will she continue it after joining Shiv Sena, a B… 6 days ago
    • RT @ANI: #WATCH Congress leader Hardik Patel slapped during a rally in Surendranagar,Gujarat https://t.co/VqhJVJ7Xc4 6 days ago
  • RSS My Reader

    • An error has occurred; the feed is probably down. Try again later.
  • Top Clicks

  • Advertisements
  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Show loader during postback with ajax in asp.net

Posted by Navi's on March 24, 2011


To show loader during post back using ajax. We can do this very easy manner.
Please wait loader

First, we have to create css for loader.


#divImage {
    position: absolute;
    padding: 4px;
    top: 0px;
    right: 0px;
    color: gray;
    font-size: 13px;
    font-family: Verdana, Helvetica, Arial, sans-serif;
    width: 150px;
    height:20px;
 }

After this we have to include the scriptmanager on page or masterpage.

<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

Then we use bellow javascript function for async postback. We added two events InitializeRequest and EndREquest these events handles the loader to show/hide.

<script type="text/javascript">
             // Get the instance of PageRequestManager.
             var prm = Sys.WebForms.PageRequestManager.getInstance();
             // Add initializeRequest and endRequest
             prm.add_initializeRequest(prm_InitializeRequest);
             prm.add_endRequest(prm_EndRequest);
            
             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                 // get the divImage and set it to visible
                 var panelProg = $get('divImage');                
                 panelProg.style.display = '';
             }
 
             // Called when async postback ends
             function prm_EndRequest(sender, args) {
                 // get the divImage and hide it again
                 var panelProg = $get('divImage');                
                 panelProg.style.display = 'none';
             }
    </script>

Now, we define the loader div in UpdatePanel.

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <div id="divImage" style="display: none">
                <div style="float: right;">
                    <img src="loader.gif" height="20px" />Please wait...</div>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>

Whenever the async post back occurs the loader div will show and hide when request ends.

That’s it… 🙂

To generate loader image we can use bellow links
ajaxload.info
preloaders.net

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

 
%d bloggers like this: