Bypassing reload/resend dialogue box?

[mottwsc]

BACKGROUND:

I'm using Javascript within some PHP programs.  There is a base PHP page with the logic and then a forms PHP page that is required at the end of the base PHP page to render the HTML.  The Javascript is in the forms PHP page to display a counter which counts down to 0 at the end of an event.  (There are actually two counters but the one of importance for this discussion is the one used for countbox 1, which relies on the variable $seconds1 to be passed in from the base PHP page).  When the JavaScript counter reaches zero, it coincides with the page being refreshed by a meta refresh tag (which is set to refresh based on the timing of $content which is passed to it from the base PHP page; the value of $content is set to trigger the refresh at the end of the event as well).  Further, I display certain fields before the event and other fields after the event, which means that the HTML which renders is different.

 

PROBLEM:

The problem is that, at the end of the event, when the refresh is done, the browser pops up a page reload/resend dialogue box for the user, which ruins the user experience.  The refresh occurs several times prior to the event (based on the shorter values of $seconds2 that are passed) and this doesn't cause any problem rerendering the page without the reload/resend dialogue popping up.  I believe that the pop up box at the end of the event is being caused because the HTML that is being rendered is different after the event, but I'm not sure.

 

I've tried a number of things, such as a header location command at the end of the base page (but I get an error from that stating that the location cannot be rendered - I assume because I'm redirecting to the same page).  I've also tried using a cache-control meta tag by itself as well as triggered off of the end of the event.  I'm thinking that the JavaScript could be made to cause a refresh at the end of the event, but I'm not sure.  A solution using either JavaScript or PHP would be fine. 

 

Any suggestions are appreciated!

 

CODE:

base PHP page (partial at end...)

<?php	

# these are only example values...
$content = 35;
$seconds1 = 35;
$seconds2 = 15;

# THIS DOES NOT WORK - redirect can't be completed
# force a redirect to avoid refresh popup when event ends
/*
if( $content < 60 and $eventOver == "yes" )	
{
   header("Location: base.php");
}
*/

require("form.php");
exit;

?>

 

forms PHP page (partial at beginning...)

<?php
require("header1.php");
/*
if( $eventOver == "yes" )
{
echo "<META HTTP-EQUIV=\"CACHE-CONTROL\" CONTENT=\"NO-CACHE\">";
}
*/

#echo "<META HTTP-EQUIV=\"CACHE-CONTROL\" CONTENT=\"NO-CACHE\">";
echo "<meta http-equiv='refresh' content='$content'>";
echo "<title>".htmlentities($name, ENT_QUOTES, 'UTF-8')."</title>";

# countbox1 - displays time until main event end 
# countbox2 - displays time until next interim event
#
# calculate time in base PHP so that server's clock is used
# then, pass seconds1, seconds2 (for countbox 1,2)


echo " 
<script type='text/javascript'>
";

echo "
function GetCount(secondsPassed, iid){

amount = secondsPassed;
if(amount < 0){
	document.getElementById(iid).innerHTML='Now';
	window.location.reload();
}
else{
	days=0;hours=0;mins=0;secs=0;out='';


	days=Math.floor(amount/86400);			
	amount=amount%86400;

	hours=Math.floor(amount/3600);			
	amount=amount%3600;

	mins=Math.floor(amount/60);				
	amount=amount%60;

	secs=Math.floor(amount);				

	if(days != 0){out += days +'d ';}
	if(days != 0 || hours != 0){out += hours +'h ';}
	if(days != 0 || hours != 0 || mins != 0){out += mins +'m ';}
	out += secs +'s';
	document.getElementById(iid).innerHTML=out;

	setTimeout(function(){GetCount(secondsPassed-1,iid)}, 1000);
}
}
";

echo "
window.onload=function(){
GetCount(".$seconds1.", 'countbox1');
GetCount(".$seconds2.", 'countbox2');
};

</script>
";
?>