locked
How to display Please wait loading on page load for a .net form RRS feed

  • Question

  • User-1633851261 posted

    I have an .net aspx page that can take a long time to load depending on where in the world you are calling it from.  I want to put up a Please wait loading message while the page is loading.

    The issue is in the aspx.cs file function Page_Load(object sender, EventArgs e)  I do a lot of data access to populate the drop downs in the form.  This can take a while to do some times.  When this is happening the use sees a blank page.

    I have searched and searched and tried four different ways but they have all failed.  See below.

    If anyone has been able to do this please help.  thank you


    ATTEMPT 1

    Calling window.onload = waitPreloadPage();

    Loads the Loading ... message and it does go to my page_load in the aspx.cs file but then it does not refresh my page with the other controls.
    I am stuck with the loading message

    Also
    - throws and error in FF (document.getElementById("prepage" is null

    function waitPreloadPage() { //DOM
        if (document.getElementById){       
          document.getElementById('prepage').style.visibility='hidden';
       }else
        {
        if (document.layers)
        { //NS4
        document.prepage.visibility = 'hidden';
        }
        else
        { //IE4
        document.all.prepage.style.visibility = 'hidden';
        }
       }
      
    }
    window.onload = waitPreloadPage();

        </script>
    </head>
    <body id="bodyTimeTable" bgcolor="#D7e1e1">
        <form id="form1" runat="server">
       
    <div id="prepage" style="; font-family:arial; font-size:16; left:0px; top:0px; background-color:white; layer-background-color:white; height:100%; width:100%;">
    <table width="100%"><tr><td><b>Loading ... ... Please wait!</b></td></tr></table>
    </div>

      <asp:UpdatePanel ID="updateStationPanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table cellpadding="2" cellspacing="0" border="0">
                    <tr>
                        <td valign="top">
                            <table cellpadding="2" cellspacing="0" border="0">
                                <tr>
                                <td colspan="2">
    ....
    ATTEMPT TWO

    Call the javascript from the body onLoad.

    If I put an alert in the waitpreloadpage function, I see the loading message and then it loads the Loading message, says the alert and loads the
    other controls.   The issue is if I do not put alert in,  I do not see the loading message.

    I have moved this code out to a network site where I know the page load in the .aspx.cs file will take a while and I just see a blank screen until I get the regular controls

    I still get the
    - throws and error in FF (document.getElementById("prepage" is null


    function waitPreloadPage() { //DOM
        if (document.getElementById){       
          document.getElementById('prepage').style.visibility='hidden';
       }else
        {
        if (document.layers)
        { //NS4
        document.prepage.visibility = 'hidden';
        }
        else
        { //IE4
        document.all.prepage.style.visibility = 'hidden';
        }
       }
      
    }

        </script>
    </head>
    <body onload="javascript:waitPreloadPage();" id="bodyTimeTable" bgcolor="#D7e1e1">
        <form id="form1" runat="server">
       
    <div id="prepage" style="; font-family:arial; font-size:16; left:0px; top:0px; background-color:white; layer-background-color:white; height:100%; width:100%;">
    <table width="100%"><tr><td><b>Loading ... ... Please wait!</b></td></tr></table>
    </div>

    <asp:UpdatePanel ID="updateStationPanel" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <table cellpadding="2" cellspacing="0" border="0">
                    <tr>
                        <td valign="top">
                            <table cellpadding="2" cellspacing="0" border="0">
                                <tr>
                                <td colspan="2">
    ....


    ATTEMPT 3.

    I created an ASP page that puts up a please wait graphic and message up, on its load I call a function that will load my other page that takes a while to load some time.

    I never see the graphic or loading, it immediately goes to the other page which is blank until everything is loaded.

    <html>
      <body bgcolor="#ffffff" onLoad="search_flights()">
     
        <center><img src="Images\wait2.gif"><br>
          <font size="4" face="Arial" color=#000060>Searching for flights - please wait...</font>
        </center>
        <form method="post">
         
        </form>
      </body>
       
      <script language="JavaScript">
        function search_flights()
        {
         document.forms[0].target="Results";
       document.forms[0].action = "default.aspx?show=MAP";
         document.forms[0].submit();
       }
      </script>
     
    ATTEMPT 4

    I added a AJAX progress bar with and image and text in it.

    When the page is loaded, it is not visible.

    the example I have seen is when someone clicks on the button the progress bar is displayed.  I need it to display with the page is in the process of loading

     

    Wednesday, February 17, 2010 1:01 PM

Answers

  • User-1633851261 posted

    Thank  you for all the response. 

    Below is the solution that works.

    I think it is because I created a DIV above the body and then did a flush.  I had tried a similar approach with a div in the body and it never showed up.

    I still have a slight time of a blank page but when the internet is slow the please wait image displays nicely and then the rest of the page

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Please wait on ASP .net</title>

        <script language="Javascript" type="text/javascript" src="scripts/Functions.js"></script>

    <script type="text/javascript" language="javascript"> 
      
      function drawMessageBox()  {         
      var box = " <div id='splashScreen'>"  +
       "<table cellpadding='0' cellspacing='0' style='width:300px; height:200px;'>" +
       "<tr><td align='center'>"   +
       " <IMG src='Images/wait2.gif' BORDER='0' Name='Progress'/>"     +
       "</td><tr><td  align='center'>Searching...</td></tr>" +
       "</table>" +
       "</div>";           
       document.write(box);
      }
      
      function toggleLayer( whichLayer )
      {  var elem, vis; 
      
      if( document.getElementById )
      // this is the way the standards work   
          elem = document.getElementById( whichLayer ); 
      else if( document.all )
      // this is the way old msie versions work     
          elem = document.all[whichLayer]; 
      else if( document.layers )
      // this is the way nn4 works   
          elem = document.layers[whichLayer]; 
      
       vis = elem.style; 
      // if the style.display value is blank we try to figure it out here 
      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)   
       vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; 
      
      vis.display = (vis.display==''||vis.display=='block')?'none':'block';
      
      }
      
      drawMessageBox();
      toggleLayer('splashScreen');
      
       
      </script>

    </head>

    <%Response.Flush();%>
    <body>
    form id="form1" runat="server">

    <!-- do your normal stuff and the backend pageload in your aspx.cs file -->

        </form>
     <% Response.Flush();%>
         <script type="text/javascript" language="javascript"> 
             toggleLayer('splashScreen');    
        </script>   
     <% Response.Flush();%>   
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 19, 2010 10:05 AM

All replies

  • User1683259043 posted

    You can use Response.Flush(); 

    You can refer the following example

    http://geekswithblogs.net/dotNETvinz/archive/2009/02/17/displaying-wait-message-on-page-load-in-asp.net.aspx


    -----------------------------------------------------------------------

    Please mark it as Answer if the above solves your issue

    -----------------------------------------------------------------------

    Wednesday, February 17, 2010 6:01 PM
  • User-1207652161 posted


    I have never done this but I have a logic hope it helps you...

    Thinking it very simple ....

    Lets have a hidden field which gets set when u get ur final value..depending upon ur time of setting the data bases on loaction.


    The timer ...and call the timer recursively..

    I mean recursive function which has SetTimeOut in it.

     

    As soon as you find the value,Set the hidden field, Stop the timer and getting inside the recursive function...

     

    I am sending you the javascript for the timer and html which will help u achieve this

    check for this value on the javascript and if the value is still null or empty update the value of t

    var progressEnd = 9;		// set to number of progress <span>'s.
    var progressColor = 'blue';	// set to progress bar color
    var progressInterval = 250;	// set to time between updates (milli-seconds)
    
    var progressAt = progressEnd;
    var progressTimer;
    
    function progress_clear() {
    	for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
    	progressAt = 0;
    }
    function progress_update() {
    	progressAt++;
    	if (progressAt > progressEnd) progress_clear();
    	else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
    	progressTimer = setTimeout('progress_update()',progressInterval);
    }
    function progress_update_original() {
    	progressAt++;
    	if (progressAt > progressEnd) progress_clear();
    	else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
    	progressTimer = setTimeout('progress_update()',progressInterval);
    }
    function progress_stop() {
    	clearTimeout(progressTimer);
    	progress_clear();
    }function startProgressBar()
    {
    	divProgressBar.style.visibility = "visible";
    	pMessage.style.visibility = "visible";
    	
    	progress_update();
    }
    
    function stopProgressBar()
    {
    	divProgressBar.style.visibility = "hidden";
    	pMessage.style.visibility = "hidden";
    	
    	progress_stop();
    }	



    <div id="pMessage" style="VISIBILITY:hidden"><b>Processing
                                    request...</b></div>
                                    
                            <div id="divProgressBar" >
                                <span id="progress1">&nbsp;&nbsp;</span>
                                <span id="progress2">&nbsp;&nbsp;</span> <span id="progress3" >&nbsp;&nbsp;</span>
                                <span id="progress4">&nbsp;&nbsp;</span> <span id="progress5">&nbsp;&nbsp;</span>
                                <span id="progress6">&nbsp;&nbsp;</span> <span id="progress7">&nbsp;&nbsp;</span>
                                <span id="progress8">&nbsp;&nbsp;</span> <span id="progress9">&nbsp;&nbsp;</span>
                            </div>

    Thursday, February 18, 2010 1:38 AM
  • User-519136805 posted

    Here is the solution that work on each browser..

    http://www.reconn.us/wait_while.html


    Hope this will Help

    Thursday, February 18, 2010 3:22 AM
  • User2080859728 posted

    Hello

    try this

    http://aspalliance.com/38_Javascript_Please_Wait_Message_Boxes.all


    Thursday, February 18, 2010 3:41 AM
  • User-1633851261 posted

    Thank  you for all the response. 

    Below is the solution that works.

    I think it is because I created a DIV above the body and then did a flush.  I had tried a similar approach with a div in the body and it never showed up.

    I still have a slight time of a blank page but when the internet is slow the please wait image displays nicely and then the rest of the page

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Please wait on ASP .net</title>

        <script language="Javascript" type="text/javascript" src="scripts/Functions.js"></script>

    <script type="text/javascript" language="javascript"> 
      
      function drawMessageBox()  {         
      var box = " <div id='splashScreen'>"  +
       "<table cellpadding='0' cellspacing='0' style='width:300px; height:200px;'>" +
       "<tr><td align='center'>"   +
       " <IMG src='Images/wait2.gif' BORDER='0' Name='Progress'/>"     +
       "</td><tr><td  align='center'>Searching...</td></tr>" +
       "</table>" +
       "</div>";           
       document.write(box);
      }
      
      function toggleLayer( whichLayer )
      {  var elem, vis; 
      
      if( document.getElementById )
      // this is the way the standards work   
          elem = document.getElementById( whichLayer ); 
      else if( document.all )
      // this is the way old msie versions work     
          elem = document.all[whichLayer]; 
      else if( document.layers )
      // this is the way nn4 works   
          elem = document.layers[whichLayer]; 
      
       vis = elem.style; 
      // if the style.display value is blank we try to figure it out here 
      if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined)   
       vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; 
      
      vis.display = (vis.display==''||vis.display=='block')?'none':'block';
      
      }
      
      drawMessageBox();
      toggleLayer('splashScreen');
      
       
      </script>

    </head>

    <%Response.Flush();%>
    <body>
    form id="form1" runat="server">

    <!-- do your normal stuff and the backend pageload in your aspx.cs file -->

        </form>
     <% Response.Flush();%>
         <script type="text/javascript" language="javascript"> 
             toggleLayer('splashScreen');    
        </script>   
     <% Response.Flush();%>   
    </body>
    </html>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, February 19, 2010 10:05 AM