INTELLIGENT WORK FORUMS
FOR COMPUTER PROFESSIONALS

Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Jobs

ASP 101

How can I present a user with a loading message? by link9
Posted: 3 Jan 02 (Edited 24 Apr 02)

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:


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

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:

response.buffer=true

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:

<%@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

Back to Microsoft: ASP (Active Server Pages) FAQ Index
Back to Microsoft: ASP (Active Server Pages) Forum

My Archive

Resources

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close