Page refresh after delay not working with setTimeout

I'm almost embarrassed to post this because the answer is probably really elementary...but I've been working with it longer than I'd like so I'm looking to you guys who write code much better than I do!

I have a form set up for file uploading, submission works just fine. While the file is loading, a 'loading' animation is displayed and the form itself is invisible. Once the file has loaded successfully, a "success" message is displayed and the form's visibility is switched back on. So far, so good, everything works.

Here's the kicker. I need the page to refresh 10 seconds AFTER the load is completed and the success message is displayed. I can set up the refresh, but no matter how I code this, it doesn't wait for the load to complete before the timer starts. I want visitors to SEE the 'file uploaded successfully' message for 10 seconds before the page refreshes, but the delay isn't working. The page refreshes and the message is never visible.

I have tried using setTimeout and placing it in the 'success' function, but it didn't work, it didn't wait until the message was displayed to start the timer. After some Googling of the problem, I found the idea of getting the time when upload starts and setting it as a variable (t), then getting the time when the load finishes (t2), subtracting the difference, and then using that with the setTimeout function. I wrote it up as a clearOut function and called it in the success function. Still, no go. Obviously I have something basic wrong in my script. Could you guys give me a hand?


var t = 0;
var t2 = 0;

function startUpload(){
document.getElementById('f1_upload_process').style.display = 'block';
document.getElementById('myResponse3').style.visibility = 'hidden';
var d = new Date();
var t = d.getTime();
return true;
}

function clearOut() {
var delay = t2 - t;
var newinterval = delay + 10000;
if (delay < 10000) {
setTimeout(window.location.reload(), newinterval);
}else {
setTimeout(window.location.reload(), 10000);
}

function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The file was uploaded successfully.<\/span><br/><br/>';

}
else {
result = '<span class="emsg">There was an error during file upload.<\/span><br/><br/>';

}
document.getElementById('f1_upload_process').style.display = 'none';
document.getElementById('f1_upload_form').innerHTML = result;
document.getElementById('myResponse3').style.visibility = 'visible';
var d2 = new Date();
var t2 = d2.getTime();
clearOut();
return true;
}
}

replace the two instances of:
window.location.reload()

with:
document.location.reload()

besides you the method setTimeout takes the first parameter whether a reference or a string.
so replace this:
function clearOut() {
var delay = t2 - t;
var newinterval = delay + 10000;
if (delay < 10000) {
setTimeout(window.location.reload(), newinterval);
}else {
setTimeout(window.location.reload(), 10000);
}


with this:

function clearOut() {
var delay = t2 - t;
var newinterval = delay + 10000;
if (delay < 10000) {
setTimeout("document.location.reload()", newinterval);
}else {
setTimeout("document.location.reload()", 10000);
}


Did you see the double quotes around the method call?

Thanks for the reply, but it's still not working. In fact, when I made the changes and retested the page, the form wouldn't even go through the submission process. I got errors on the page (in the bottom status bar) and the file wouldn't upload.

I removed everything about the timer (everything in red in the code above) and the form submits just fine again, the success message displays, etc. When I try to put in the time delay refresh, though, it throws off the code and breaks. :confused:

It seems like this should be so simple...

I can see that you are defining the variables t and t2 more than once and all functions.
make them global variables and inside the methods assign values to them.


So remove the var from before the t and the t2 in the methods startUpload and stopUpload.

Thanks all. I tried the suggestions here but never could get the t variables to work as I'd hoped, but I DID change it to this, and it works:


function startUpload(){
document.getElementById('f1_upload_process').style.display = 'block';
document.getElementById('myResponse3').style.visibility = 'hidden';
return true;
}

function stopUpload(success){
var result = '';
if (success == 1){
result = '<span class="msg">The file was uploaded successfully.<\/span><br/><br/>';

}
else {
result = '<span class="emsg">There was an error during file upload.<\/span><br/><br/>';

}
document.getElementById('f1_upload_process').style.display = 'none';
document.getElementById('f1_upload_form').innerHTML = result;
document.getElementById('myResponse3').style.visibility = 'visible';
clearOut();
return true;
}
function clearOut() {
setTimeout("window.location.reload()", 6000);
}


The quotation marks around the reload statement made a big difference, so thanks for that suggestion!