:::: MENU ::::

Sunday, June 29, 2008

June 29, 2008

How to show google mail like loading image/please wait. message while page data loads

For a better user experience you would your users to see please wait message while browser render the page completely. Here is the one solution to the same problem.

Let’s create a master page called Site.master and a web content form as demo.aspx.

view plaincopy to clipboardprint

  1.     <title>Loading Demo</title>  
  2.   
  3.     <form>  
  4.    
  5.    
  6.    
  7.    
  8.           
  9.   
  10. <div>  
  11.   
  12. <!-- Page Header will go here... -->  
  13.   
  14. </div>  
  15.   
  16. <div>  
  17.   
  18.                                             <!-- Page-specific content will go here... -->  
  19.                                           
  20.   
  21. </div>  
  22.   
  23. <div>  
  24.   
  25. <!-- Page Footer will go here... -->  
  26.   
  27. </div>  
 
    <title>Loading Demo</title>
 
    <form>
 
 
 
 
        
 
<div>
 
<!-- Page Header will go here... -->
 
</div>
 
<div>
 
                                            <!-- Page-specific content will go here... -->
                                        
 
</div>
 
<div>
 
<!-- Page Footer will go here... -->
 
</div>

Demo.aspx is the web content form which fetches data from a database.

view plaincopy to clipboardprint

  1. <!-- Code to fetch data from a database -->  
 
<!-- Code to fetch data from a database -->

To show loading message add following code to the code behind of master file Site.master.cs

view plaincopy to clipboardprint

  1.   protected override void OnLoad(EventArgs e)  
  2.         {  
  3.             if (!IsPostBack)  
  4.             {  
  5.                 Response.Buffer = false;  
  6.                 Response.Write("<div style='top:2px;left:2px;width:83px;height:19px;text-align:right;background-color:orange;'>Please wait...</div>");  
  7.                 Response.Flush();  
  8.             }  
  9.             base.OnLoad(e);  
  10.         }  
  11.         protected override void Render(HtmlTextWriter writer)  
  12.         {  
  13.             if (!IsPostBack)  
  14.             {  
  15.                 Response.Clear();  
  16.                 Response.ClearContent();  
  17.             }  
  18.             base.Render(writer);  
  19.         }  
 
  protected override void OnLoad(EventArgs e)
        {
            if (!IsPostBack)
            {
                Response.Buffer = false;
                Response.Write("<div style='top:2px;left:2px;width:83px;height:19px;text-align:right;background-color:orange;'>Please wait...</div>");
                Response.Flush();
            }
            base.OnLoad(e);
        }
        protected override void Render(HtmlTextWriter writer)
        {
            if (!IsPostBack)
            {
                Response.Clear();
                Response.ClearContent();
            }
            base.Render(writer);
        }

in the Site.master.aspx file add following javascript at the end of the file.

view plaincopy to clipboardprint

  1.    
  2.     try{  
  3.  var divLoadingMessage =  document.getElementById("divLoadingMsg&quot <img src="http://s.wordpress.com/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley">  
  4.  if (divLoadingMessage != null && typeof(divLoadingMessage) != 'undefined' <img src="http://s.wordpress.com/wp-includes/images/smilies/icon_wink.gif" alt=";)" class="wp-smiley">  
  5.         {  
  6.             divLoadingMessage.style.display="none";  
  7.             divLoadingMessage.parentNode.removeChild(divLoadingMessage);  
  8.         }  
  9.     }catch(e){}  
 
 
    try{
 var divLoadingMessage =  document.getElementById("divLoadingMsg&quot ;)
 if (divLoadingMessage != null && typeof(divLoadingMessage) != 'undefined' ;)
        {
            divLoadingMessage.style.display="none";
            divLoadingMessage.parentNode.removeChild(divLoadingMessage);
        }
    }catch(e){}

That’s it now all your pages using Site.master will be showing Please wait.. message when the page starts loading. Of course instead of putting a message you can put a nice web2.0 loading image in between divLoadingMsg tags.
So how does this works?
The onLoad event of master page will be called before any of the content web form’s Onload event. as soon as master page loads div tag becomes visible. After the page has loaded completely the script written at the end of the master page hides the div tag. so simple isnt’t it.Hope this helps!

More

Categories: