How to Please wait loading on a .net form

jtaylorttt · Feb 17, 2010

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 three 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="position:absolute; 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" class="wrapper">
<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="position:absolute; 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" class="wrapper">
<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>

jbenson001 · Feb 17, 2010

To do what you want you have to use a client call back. You can look up iCallBack or Ajax. There are also 3rd party objects that use AJAX to display a message.

jmeckley · Feb 17, 2010

how much data are you loading?
how many database calls are made?
how efficient are the queries (table/index scan/seek)?

I would start here, rather than jumping straight to ajax. for example:
say you display a table of paged data. are your querying all the records from the database only to display 10-20 at a time. if so you can optimize this data by only selecting the 10-20 records and also querying for the total number of rows. then build the table and paging manually.

say there are 6 drop down lists to populate. rather than issue 6 individual commands (or worse 6 connections with 1 command each) you can batch all 6 queries into one command. this creates a single remote call to the database (rather than 6 remote calls). you can then cycle through each result set and build your dropdownlists.
another option is to use autocomplete text boxes (you build yourself) and remove the need for the initial 6 database calls altogether.

finally, if the queries are not taking advantage of indexing (just about every RDMS has indexing) this will also cause latency. "Like" queries can be a preformance killer as well.

these enhancements will have a bigger impact on system preformance then making multiple ajax calls.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

jtaylorttt · Feb 17, 2010

The issue is not really the calls to get data. The long delay only happens with our customer is coming from Russia to our Atl servers. This area has a very bad internet connection and it takes a long time to go back and forth. From most of the world it does not have a problem.

jtaylorttt · Feb 17, 2010

I tried using the Ajax Progress bar but it would not display on the initial load, I am not sure why. The example I have seen, had the progress bar display on a button click and it displayed will they did stuff in on the click.

How do you get it to display right when it loads.

jmeckley · Feb 17, 2010

you don't, unless you change how the page is structured. this would effect every client though.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

jtaylorttt · Feb 19, 2010

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



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

jmeckley · Feb 19, 2010

if it works...
I would heavily document this hack so when you return to this code, or a new developer comes along, the person can understand what is happening.

Jason Meckley
Programmer
Specialty Bakers, Inc.

faq855-7190
faq732-7259

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to Please wait loading on a .net form

jtaylorttt

Programmer

jbenson001

Programmer

jmeckley

Programmer

jtaylorttt

Programmer

jtaylorttt

Programmer

jmeckley

Programmer

jtaylorttt

Programmer

jmeckley

Programmer

Similar threads

Part and Inventory Search

Sponsor