CodeCharge Studio
search Register Login  

Web Reports

Visually create Web Reports in PHP, ASP, .NET, Java, Perl and ColdFusion.
CodeCharge.com

YesSoftware Forums -> CodeCharge Studio -> Tips & Solutions

 Display "Please wait while page loads" message

Print topic Send  topic

Author Message
Damian Hupfeld
Posted: 03/14/2007, 5:07 AM

If you have a page that takes a long time to display because of the amount
of data being downloaded (eg you may have large amount of info in listboxes)
the following may help -

I eventually worked out that my onLoad or window.onload events were
conflicting with the ones that CCS was inserting.

What I eventually did was -

in the HEAD

  
    <script language="JavaScript">  
      function myLoad()  
      {  
        if (document.all)  
        {  
          document.all.loading.style.visibility="hidden";  
        }  
        else  
        {  
          document.loading.visibility="hide";  
        }  
      }  
    </script>  

plus AFTER the
function bind_events() 
I added -

  
function my_events() {  
    bind_events();  
    myLoad();  
}  

The above code is how you overcome the conflict with the CCS window.onload
events.

Then after the
window.onload = bind_events; //Assign bind_events 
I added the following line
window.onload = my_events; //Assign my_events 

The reason I didnt edit these two sections directly is to preserve the CCS
coding so that CCS can continue to manage its own code.

Then in the BODY I added
  
      <div id="loading">  
        <p>Please wait while <br>latest store list <br>is downloaded...</p>  
      </div>  

I also added an entry in the Style.css
  
#loading {  
  width: 200px;  
  height: 90px;  
  background-color: #ff9900;  
  position: absolute;  
  left: 50%;  
  top: 110;  
  margin-left: -100px;  
  text-align: center;  
 color: #ffffff;  
 font-weight: bold;  
 border: 2px solid #333333;  
}  

So far so good - it all appears to be working well - you cen see it in
action on the following page -
http://www.sagemconnect.com/07/register.php

Damian

DonB
Posted: 04/30/2007, 1:46 PM

Another way that should work as well but is somewhat simpler. Just add this
to the onload event:

document.getElementById('loading').innerHTML = '';

I think that's valid regardless of whose browser your using so testing for
the existence of 'document.all' ) to decide on the correct way to hide the
div) isn't required. You could also delete the <div> altogether, but that's
more work and isn't necessary. So just leave it there, but empty.

Another tip on the potential of an 'onload' conflict is to construct your
code as described here:

http://www.sitepoint.com/blogs/2004/05/26/closures-and-...t-on-page-load/

--
DonB

http://www.gotodon.com/ccbth


"Damian Hupfeld" <damian.hupfeld@itng.com.au> wrote in message
news:et8s2j$upb$1@news.codecharge.com...
> If you have a page that takes a long time to display because of the amount
> of data being downloaded (eg you may have large amount of info in
listboxes)
> the following may help -
>
> I eventually worked out that my onLoad or window.onload events were
> conflicting with the ones that CCS was inserting.
>
> What I eventually did was -
>
> in the HEAD
>
>
  
>     <script language="JavaScript">  
>       function myLoad()  
>       {  
>         if (document.all)  
>         {  
>           document.all.loading.style.visibility="hidden";  
>         }  
>         else  
>         {  
>           document.loading.visibility="hide";  
>         }  
>       }  
>     </script>  
> 
>
> plus AFTER the
>
function bind_events() 
> I added -
>
>
  
> function my_events() {  
>     bind_events();  
>     myLoad();  
> }  
> 
>
> The above code is how you overcome the conflict with the CCS window.onload
> events.
>
> Then after the
>
window.onload = bind_events; //Assign bind_events 
> I added the following line
>
window.onload = my_events; //Assign my_events 
>
> The reason I didnt edit these two sections directly is to preserve the CCS
> coding so that CCS can continue to manage its own code.
>
> Then in the BODY I added
>
  
>       <div id="loading">  
>         <p>Please wait while <br>latest store list <br>is  
downloaded...</p>  
>       </div>  
> 
>
> I also added an entry in the Style.css
>
  
> #loading {  
>   width: 200px;  
>   height: 90px;  
>   background-color: #ff9900;  
>   position: absolute;  
>   left: 50%;  
>   top: 110;  
>   margin-left: -100px;  
>   text-align: center;  
>  color: #ffffff;  
>  font-weight: bold;  
>  border: 2px solid #333333;  
> }  
> 
>
> So far so good - it all appears to be working well - you cen see it in
> action on the following page -
> http://www.sagemconnect.com/07/register.php
>
> Damian
>
>

hiraldesai

Posts: 38
Posted: 01/01/2008, 2:57 PM

Hi there,

I want to implement similar functionality to this on a report page but the loading message should display before everything else on the page and should go away when the report is finished loading. I have referred to number of articles but they all involve Turning off the Response Buffer and putting Response Flush before and after the certain elements of the page. I am not sure how this can be done in CodeCharge. I have tried plenty of different things but the page seems to buffer all it's contents until the end.

http://authors.aspalliance.com/peterbrunone/pleasewait.asp
http://classicasp.aspfaq.com/general/how-do-i-show-a-pl...it-message.html

The trick mentioned above would not work for the functionality I am trying to implement. Can anyone help?

Regards,
Hiral
_________________
-------
Hiral
View profile  Send private message
E43509

Posts: 282
Posted: 01/02/2008, 7:39 AM

I've used this technique found at http://www.aspnetpro.com/NewsletterArticle/2003/08/asp2...p200308bm_l.asp which basically sends you to an intermediate page that then calls your final page.
View profile  Send private message
E43509

Posts: 282
Posted: 01/02/2008, 7:44 AM

Just in case the link goes away, here is the text from it:

Make a Progress Indicator For Slow-Loading Pages

Create a pop-up status page that lets your users know they're not forgotten.
By Brad McCabe

One problem with ASP.NET is that keeping the user informed about the status of a long running task is difficult. When a page that takes time to load is posted to the server, the user often is left wondering whether the application is responding or if their request even made it to the server. I'll give you a simple tip that provides the user a basic status screen to provide them better feedback.

First, create a basic page that asks a user for their name and provides them a button to submit the page. The code behind the button is pretty simple:

Response.Redirect("EndPage.aspx?name=" & Name.Text)

Next, create a simple page that sleeps the thread for 10 seconds to simulate a long running process. After the thread wakes up, the page updates a label to welcome the user. The code looks like this:
  
System.Threading.Thread.Sleep(10000)  
  
Label1.Text = "Welcome " & Request.QueryString("Name") & "!"  

If you run these two pages, you'll find that when you click on the submit button, the browser sits on the start page for 10 seconds without any feedback to the user. Now modify the start-page code to redirect to an intermediary loading page. This page provides your end user with visual notification that the application is processing their request. Here's the new code behind on the submit button:

  
Dim URL As String = "EndPage.aspx?name=" & Name.Text  
  
Response.Redirect("Loading.Aspx?Page=" & URL)  
The previous code now captures the original URL and passes it on the query string to the loading page, Loading.Aspx. The loading page then displays to the user a status message while loading the requested page.

First, start by creating a basic message for your user:
  
<table border="0" cellpadding="0" cellspacing="0"  
  width="99%" height="99%" align="center"  
  valign="middle">  
    <tr>  
          <td align="center" valign="middle">  
    <font color="Red" size="5">  
      <span id="Message">Loading --  
                  Please Wait</span>  
      <span id="Progress" style="WIDTH:25px;  
                    TEXT-ALIGN:left"></span>  
    </font>  
          </td>  
   </tr>  
</table>  

Inside the table at the middle of the screen, you want to display a message to the user. You'll use JavaScript's Progress span tag here to update the screen and inform the user that the application is responding.

Now that the screen is set up, you need to hook up the JavaScript to make the page work using the client-side onLoad and onUnload events:
  
<body onload="BeginPageLoad()" onunload="EndPageLoad()">  

When the page is loaded, your custom BeginPageLoad function is fired. BeginPageLoad has two lines of JavaScript:
  
location.href = "<%= Request.QueryString("Page")%>";  
iIntervalId = window.setInterval("iLoopCounter=  
  UpdateProgress(iLoopCounter, iMaxLoop)", 500);  

The first line of code starts the loading processes for the requested page. After the page has been requested from the server, a call to the UpdateProgress function starts a timer that updates the screen. This function uses the Progress span tag and displays five dots in succession. When the fifth dot is added, the span is cleared and the process starts over. Once the new page is finished loading, it is rendered immediately for the user and the EndPageLoad function will be processed. The EndPageLoad function then performs some basic clean-up and notifies the user if the transfer fails or an error occurs:
  
window.clearInterval(iIntervalId);  
Progress.innerText = "Page Loaded -- Not Transferring";  


As you can see, you need only a few lines of JavaScript to provide the user with visual notification that their request has been submitted and is being processed. By providing the user with this feedback, you can help eliminate the possibility that the user will cancel the page request and attempt to resubmit the page or hit the submit button repeatedly, possibly corrupting your data or bringing down the application.
View profile  Send private message
antman48

Posts: 7
Posted: 03/16/2008, 10:38 AM

You can use this Javascript

function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
}
else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}


works with :

addLoadEvent(nameOfSomeFunctionToRunOnPageLoadwithoutParenthesis);
View profile  Send private message

Add new topic Subscribe to topic   


These are Community Forums for users to exchange information.
If you would like to obtain technical product help please visit http://support.yessoftware.com.

Internet Database

Visually create Web enabled database applications in minutes.
CodeCharge.com

Home   |    Search   |    Members   |    Register   |    Login


Powered by UltraApps Forum created with CodeCharge Studio
Copyright 2003-2004 by UltraApps.com  and YesSoftware, Inc.