Necessity, the mother of invention

  • Twitts

  • RSS My Reader

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

    • None
  • Advertisements
  • Visitor Map

    Locations of Site Visitors
  • Flag Counter

    free counters

Show loader during postback with ajax in

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;

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

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

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
             // Called when async postback begins
             function prm_InitializeRequest(sender, args) {
                 // get the divImage and set it to visible
                 var panelProg = $get('divImage');                
        = '';
             // Called when async postback ends
             function prm_EndRequest(sender, args) {
                 // get the divImage and hide it again
                 var panelProg = $get('divImage');                
        = 'none';

Now, we define the loader div in UpdatePanel.

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

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


Leave a Reply

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

You are commenting using your 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: