Tech – Noesis

The more you know, you know how little you know

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

Posted by Pradeep Mishra on March 4, 2008

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.







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



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

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

  protected override void OnLoad(EventArgs e)
  {
  if (!IsPostBack)
  {
  Response.Buffer = false;
  Response.Write(“

Please wait…

“);
  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.

 
    try{
 var divLoadingMessage =  document.getElementById("divLoadingMsg")
 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!

Advertisements

27 Responses to “How to show google mail like loading image/please wait… message while page data loads”

  1. Lukas said

    How would you implement this without master pages. I have a web service I’m loading on a page and would like to have the message displayed (on the latter page) while it loads and obviously show the result from the web service when it loads.

    Thanks

  2. Yes you can still do that. You can think of master page as top container and content page as a control inside top container. The concept about Asp.net Page Events is that they are raised from the innermost control to outermost control. So Why don’t you create a base page in your UI layer and derive all the UI pages from this base page and your base page should be derived from System.UI.Page. Write the same method in BasePage class.

    public class BasePage : System.Web.UI.Page
    {
    public BasePage()
    {

    }
    protected override void OnLoad(EventArgs e)
    {
    if (!IsPostBack)
    {
    Response.Buffer = false;
    Response.Write(“

    Please wait…

    “);
    Response.Flush();
    }
    base.OnLoad(e);
    }
    protected override void Render(HtmlTextWriter writer)
    {
    if (!IsPostBack)
    {
    Response.Clear();
    Response.ClearContent();
    }
    base.Render(writer);
    }
    }

    The only problem you can face is writing script at the end of each content page. However here is the modified Constructor of Base Class ..See if it works else let me know..

    public BasePage()
    {
    if (!this.Page.ClientScript.IsStartupScriptRegistered(“loadscript”))
    this.Page.ClientScript.RegisterStartupScript(typeof(Page), “loadScript”, ““, false);
    }

  3. Mahesh said

    Hi there, this sounds realy useful. I am trying to use your example. but it doesn’t work for me. It’s giving a javascript error. please help.

  4. Hugone said

    The only problem there is that when ASP.NET runs the Response.Write line, it places it at the beginning of the code in the ASPX file, so you’ll get something like

    in your page, which is quite inconsistent

  5. Hugone said

    Sorry, last one didn’t show:

    The only problem there is that when ASP.NET runs the Response.Write line, it places it at the beginning of the code in the ASPX file, so you’ll get something like

    <div…>
    <html><head>…</head>

    </html>

    in your page, which is quite inconsistent

  6. piyal said

    really. this is working.. cool!!

  7. Jeyakumar said

    It is working fine. Very useful to relax the user till the page loads.

    But, in my case, I am loading crystal report in my page for which I am passing the parameter from the drop down list in the same page.

    So I have commented the Postback checking in both functions OnLoad & Render. (ie) Allow the code to run even in the post back case also.

    The problem here is that the “EXPORT” option in the crystal report doesn’t work; instead it throws error: “Server cannot set content type after HTTP headers have been sent.”. I hope that the EXPORT function may use the RESPONSE object & content type.

    Can any one pls help me solve this issue?

    Thanks in Advance. 🙂

  8. farheen said

    Hi,
    m trying to use this code but in my case it is not showing any thing and the master page is loading after the content page, why this is happening…

  9. i have two question

    ques. 1.

    when we apply ur code for page loading its shows the fallowing error.and message “please wait..” already exist after page loading.
    Error is=Cannot redirect after HTTP headers have been sent.

    if possible please send me a complete page containing ur code

    Question 2.

    how i can find the client ip address

  10. Suresh said

    Hi,
    This article is very usefull , but here is a small change we required. i.e

    it is worked in Mozila but it doesn’t working in InternetExplorer…

    How to write the code to work both in Mozilla as well as InternetExplorer…

  11. Ankur said

    HI,

    Your article is very useful. But I have a little different scenario. IN my case I am using master page but I want to show loading image only for a particular content page. Is their any way to do so??

    Thanks, looking forward for your reply

  12. Ashu said

    Hi,

    Your code seems to be very useful for my requirement. But what do you mean by adding the javascript code at the end of the masterpage.aspx ?

    Waiting for the reply. TIA .. 🙂

    Regards,
    Ashu Goel

  13. hrt said

    tryrt

  14. In the master page ad the javascript just before body tag ends using tags

  15. Duraid said

    Hi,

    I have tried but the problem every page has CollapsiblePanelExtender you cant close them anymore all CollapsiblePanels open. It will be great help if you can help me.

    Thanks
    Duraid

  16. Sandesh said

    When I ran this code…. Please wait meesage is showing continuosly on page load…it like it going in infinite loop and didnt stop loading page…..what would be the problem…if u want i can paste my code…

  17. Sandesh said

    It work finally but Please wait meesage is not disappering

  18. sandrar said

    Hi! I was surfing and found your blog post… nice! I love your blog. 🙂 Cheers! Sandra. R.

  19. Kumarakom Kerala…

    […]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…

  20. [xbox360|xbox 360 games|games on xbox 360]…

    […]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…

  21. Sites we Like…

    Only a small number of internet sites have this sort of information. From our point of view are certainly well worth visiting…

  22. money said

    money…

    […]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…

  23. smslån 3000…

    […]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…

  24. website said

    website…

    […]How to show google mail like loading image/please wait… message while page data loads « Tech – Noesis[…]…

  25. Cool.. Thank you !

  26. I actually wanted to write a message so as to thank you for all of the wonderful
    tips and tricks you are placing here. My time-consuming internet search has
    finally been recognized with reliable insight to talk about with my
    friends. I would repeat that most of us website visitors are extremely endowed to dwell in a wonderful community with many lovely individuals with interesting guidelines.
    I feel rather happy to have discovered your entire website
    and look forward to many more fabulous times reading here.
    Thanks a lot once more for everything.

  27. Johng822 said

    This is why Facebook games are becoming more popular. The ease of use and dissemination of content, tagging deefffdfkfde

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

 
%d bloggers like this: