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!
-
Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!
How can I present a user with a loading message?
ASP 101
It has been asked several times about displaying a user a message while your page loads if it takes a long time. I came up with this very simple little script, which is actually javascript based, and so I figured I'd share.
A note that the example I put here for the loading page will actually do something in later browsers (it adds periods to the end of the message -- one every second), but in older browsers (4.x), it will just be static, which is ok, too.
---------------------------------------
First, just make a page. Call it load.htm or something like that, and make it look like the following:
Without walking through the particulars, like I said above, the combination of those two funtions combined with the setTimeout() will just add a period to the end of your message each second. Feel free to modify the number of seconds to suit your needs. Currently, it's set on 15 (the i<=15).
Notice the body onBlur="this.focus();", which will make the page stay front and center until your parent page is finished w/ whatever it's doing. I know it seems bad, but if you're implementing this solution, you're probably working on a big app where ppl will be a bit more forgiving on what features and handcuffs you implement. If you think your users might not appreciate it, then just remove it. ;-)
Then, on your ASP page, make sure that buffering is on like so:
If you don't know, this code goes right after your language definition and your <%option explicit%> declaration. If you aren't using option explicit, then it's time you started.
and then put this bit of code right after your opening <body> tag:
<script language=javascript>
var url = 'load.htm';
var x = window.open(url,'loadingWindow','height=50,width=150,scrollbars=no,toolbar=no');
x.moveTo(200, 200);
</script>
Feel free to modify the window parameters to suit your needs, but all this will do is popup the window with your message in it.
To make this work properly, you will need to do your processing AFTER this bit of client side code has been output. That means ALL processing afterwards, so that when the page is called, the server will buffer out the above client side code, the loading message will be shown, and THEN your server side routines can start their work, while your user is conveniently passified by your wicked-cool loading message.
The simplest way to do this would be to incorporate everything into one main function for your ASP, and then call that right after you put the code above.
So for example:
<%
writeMainContent
%>
might be your next line, and that would be defined as a function on your ASP page, and it would do all your work.
The only thing left to do is to make another client side function. You might want to call it: 'closeLoader()' and it might look like this:
function closeLoader(){
x.close();
}
and then modify your body tag to look like this:
<body onLoad="closeLoader();">
and there you have it... once the page finishes rendering to your users' browsers, the little load.htm page will close out.
Very simple yet effective method to show your users that something is going on, and for them to just be patient.
Just for clarification, here's the whole sha-bang for your parent page:
----------------------------------
ADDENDUM
-----------------------------------
Go to your favorite animated .gif editor, and make a loading message animated gif -- and just display that on the page for an even easier loading message. Just kill the javascript, pop in the pic, and you're off and running.
happy coding everyone!
Paul Prewett
A note that the example I put here for the loading page will actually do something in later browsers (it adds periods to the end of the message -- one every second), but in older browsers (4.x), it will just be static, which is ok, too.
---------------------------------------
First, just make a page. Call it load.htm or something like that, and make it look like the following:
Code:
<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE>Loading...</TITLE>
<script language=javascript>
function dotIt(){
var i
for (i=0;i<=15;i++)
setTimeout('dotItAgain();',i*1000);
}
function dotItAgain(){
var value = theSpan.innerHTML;
theSpan.innerHTML = value + '.';
}
</script>
</HEAD>
<BODY onBlur="this.focus();" onLoad="dotIt();">
<P align=left><STRONG><FONT face=Arial
size=4><span id=theSpan name=theSpan>Loading.</span></FONT></STRONG></P>
</BODY>
</HTML>Notice the body onBlur="this.focus();", which will make the page stay front and center until your parent page is finished w/ whatever it's doing. I know it seems bad, but if you're implementing this solution, you're probably working on a big app where ppl will be a bit more forgiving on what features and handcuffs you implement. If you think your users might not appreciate it, then just remove it. ;-)
Then, on your ASP page, make sure that buffering is on like so:
Code:
response.buffer=trueand then put this bit of code right after your opening <body> tag:
<script language=javascript>
var url = 'load.htm';
var x = window.open(url,'loadingWindow','height=50,width=150,scrollbars=no,toolbar=no');
x.moveTo(200, 200);
</script>
Feel free to modify the window parameters to suit your needs, but all this will do is popup the window with your message in it.
To make this work properly, you will need to do your processing AFTER this bit of client side code has been output. That means ALL processing afterwards, so that when the page is called, the server will buffer out the above client side code, the loading message will be shown, and THEN your server side routines can start their work, while your user is conveniently passified by your wicked-cool loading message.
The simplest way to do this would be to incorporate everything into one main function for your ASP, and then call that right after you put the code above.
So for example:
<%
writeMainContent
%>
might be your next line, and that would be defined as a function on your ASP page, and it would do all your work.
The only thing left to do is to make another client side function. You might want to call it: 'closeLoader()' and it might look like this:
function closeLoader(){
x.close();
}
and then modify your body tag to look like this:
<body onLoad="closeLoader();">
and there you have it... once the page finishes rendering to your users' browsers, the little load.htm page will close out.
Very simple yet effective method to show your users that something is going on, and for them to just be patient.
Just for clarification, here's the whole sha-bang for your parent page:
Code:
<%@language=vbscript%>
<%option explicit%>
<%response.buffer=true%>
<body onLoad="closeLoader();">
<script language=javascript>
var url = 'load.htm';
var x = window.open(url,'loadingWindow','height=50,width=150,scrollbars=no,toolbar=no');
x.moveTo(200, 200);
function closeLoader(){
x.close();
}
</script>
<%
writeMainContent 'assuming you want to do it this way
%>
</body>
</html>----------------------------------
ADDENDUM
-----------------------------------
Go to your favorite animated .gif editor, and make a loading message animated gif -- and just display that on the page for an even easier loading message. Just kill the javascript, pop in the pic, and you're off and running.
happy coding everyone!
Paul Prewett