Using Timers in JavaScript - A Long Wait
(Page 7 of 7 )
Finally, I'll wrap things up with a more practical example, one which might come in handy in your Web development. In this next example, the task is to offer the user a file upload box, which he or she can use to upload files to a Web site. Once the user selects a file for upload and initiates the transfer, a dialog box should pop up with a message asking the user to be patient. Once the file upload completes, the dialog box (window) should automatically disappear.
Now, there are a number of ways to implement this. Here's how I'm going to do it:
1. Write the code to display a form for file upload, as well as the code to accept the file and transfer it to a data directory on the server. This will be implemented in PHP.
2. Add code to the script above to throw up a pop-up window once the upload begins.
3. Add code to the pop-up window to keep polling the parent window for file upload status. Once the upload has finished (signified by the parent browser window loading a new URL), the pop-up window will automatically close.
First, the code for the form:
<html>
<head>
</head>
<body background="images/bkgd.gif" leftmargin="0" rightmargin="0"
marginheight="0" marginwidth="0" topmargin="0">
<form action="upload.php" method="POST"
onSubmit="window.open('wait.html','resultsWindow','toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,
resizable=no,copyhistory=no,
width=500,height=400');" enctype="multipart/form-data" >
Attach File
<br>
<input name="file" type="file" size="30" maxlength="50">
<br>
<input type="submit" value="Submit">
</body>
</html>
Now, the server-side PHP script which processes the file submitted by the user through the form above:
<?php
// upload.php
// upload the file to the server
if($_FILES['file'][name] != "")
{
if (is_uploaded_file($_FILES['file']['tmp_name']))
{
// if the file is clean, move it to final location
if(file_exists($_FILES['file']['tmp_name']))
{
// check the size of the file
if($_FILES['file']['size'] < $file_limit)
{
// get the file name
$NAME = $_FILES['file']['name'];
// copy it to data directory
if(copy($_FILES['file']['tmp_name'], $UPLOAD_LOCATION.$NAME))
{
// send browser to success page
header("Location: success.php");
}
}
}
}
}
Once the upload is complete, the script above will redirect the browser to a success page (or an error page, if an error occurred).
Notice in the form that I'm opening a new window when the user clicks the submit button. This new window will show the "be patient" message, and must also keep checking the parent window at pre-defined intervals to see if the transfer is complete. Here's the code:
<html>
<head>
<script language="JavaScript">
<!--
// wait.html
function checkOpenerStatus() {
var strOpener = opener.location.href;
if(strOpener.indexOf("success.php") != -1 ||
strOpener.indexOf("error.php") != -1) {
// I am going to close now
self.close();
}
}
// -->
</script>
</head>
<body onLoad="setInterval('checkOpenerStatus()', 1000)">
<center>
<h1>
Please wait, your upload is being processed!
<br>
This window will close automatically once the upload is complete.
</h1>
</center>
</body>
</html>
This script uses the setInterval() method to check the URL of the parent window every second and, when it detects that the parent has gone to the success or error page (indicating that the upload has completed), it automatically terminates itself with the self.close() method.
And that's about all I have time for. Over the course of this article, I introduced you to JavaScript's four timing functions, showing you how to use the setTimeout() and setInterval() methods to call a function once after a pre-defined delay, or repeatedly at a pre-defined interval. That was the easy part, and I followed it up with a bunch of examples designed to showcase some of the things you can do with this power. Among the example applications I built: a browser tickertape, a countdown clock, a timed slideshow, a variable-speed page object, and a polling status window.
I hope you had fun reading this article, and that the examples sparked off some ideas of where you can use these functions in your own scripts. 'Till next time, see ya!
Note: Examples are illustrative only, and are not meant for a production environment. Melonfire provides no warranties or support for the source code described in this article.
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
/ 81 
