/    Sign up×
Community /Pin to ProfileBookmark

AJAX/PHP Countdown Problem When Page Refreshed…

I have put together some code to countdown to a date specified in a PHP file using the server time to calculate the time difference.

The problem is that although the countdown is displayed correctly when the page is first loaded, when the page is refreshed in the browser the counter goes to zero.

Can anyone point out where I’m going wrong?

I’m using three files: index.html, ajaxcountdown.js & servertime.php.

index.html…

[CODE]
<html>
<head>
<title></title>
<SCRIPT language=JavaScript src=”functions.js”></SCRIPT>
</head>
<body>
<P>Countdown ends:</P>
<script src=”ajaxcountdown.js”></script>
</body>
</html>
[/CODE]

ajaxcountdown.js…

[CODE]
document.writeln(‘<span class=”” style=”color:#f00;font-size:39px;font-weight:bold;” id=”countdowntimer”></span>’);

InitiateTimer();

function UpdateTimer()
{
TimeLeft–;
strText = ”
if (TimeLeft <= 0)
{
strText = “NOW!!!”;
}
else
{
strText = parseInt(TimeLeft/86400)+ ” Days “+parseInt(TimeLeft/3600%24)+ ” Hours “+parseInt(TimeLeft/60%60)+ ” Minutes “+parseInt(TimeLeft/1%60)+ ” Seconds “;
}
document.getElementById(‘countdowntimer’).innerHTML = strText;
}
var TimeLeft = -1;
function InitiateTimer()
{
var http;
var http = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http = new XMLHttpRequest();
if (http.overrideMimeType) {
http.overrideMimeType(‘text/xml’);
}
} else if (window.ActiveXObject) { // IE
try {
http = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
http = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
if (!http) {
alert(‘Agent unable to establish communication 🙁 ‘);
return false;
}

http.open(“GET”, “servertime.php”, true);
http.onreadystatechange = function()
{
if (http.readyState == 4) {
//var response = http.responseText;
//a = response.split(‘n’);
//TimeLeft = a[1];
TimeLeft = http.responseText;
setInterval(“UpdateTimer()”,1000);
}
}
http.send(null);
}
[/CODE]

servertime.php…

[CODE]
<?php
// The number of the month when the countdown ends (1-12)
$month=12;
//The number of the day when the countdown ends (1-31)
$day=5;
//The number of the year when the countdown ends (yyyy)
$year=2008;
// How do you want the countdown displayed?
// 1 = days
// 2 = hours
// 3 = minutes
// 4 = seconds
$display = 4;
// DON’T EDIT AFTER THIS LINE
// ————————–
$target = mktime(0, 0, 0, $month, $day, $year);
$today = time ();
$difference =($target-$today);
if ($display == 1) { echo ($difference/86400); }
if ($display == 2) { echo ($difference/3600); }
if ($display == 3) { echo ($difference/60); }
if ($display == 4) { echo ($difference); }
?>
[/CODE]

Any help will be much appreciated! ?

to post a comment
JavaScript

1 Comments(s)

Copy linkTweet thisAlerts:
@Angry_Black_ManSep 24.2007 — sadly, when you mix javascript with any code from server side languages, you drop your chance for a response to slightly above 0% on these boards. ajax questions often have a very tough life on these boards unless you can remove the server side references from them first. just an observation.

that said, i did stumble on a solution after working with this for about an hour and throwing alerts after every time "timeleft" was called or modified.

first of all, FF doesnt choke at all. it errors for some reason about the PHP containing a syntax error, but the script continues to work. and i dont understand how or why it would care about the PHP, but anyway...

something that i dont understand is this... i expect code to complile by first checking all the syntax from line 1 to the last line, and then running all code from line 1 to the last line, except where a function must be called. that of course will be run when the function is envoked.

so in your code, i expect the following to run, respectively, immediatly:


document.writeln

InitiateTimer();

var TimeLeft = -1;
[/quote]


however, it doesnt do exactly that, in FF [I]or[/I] IE during the first compile.. after i put alerts after every "timeleft" call (declaration, redeclaration, modification), i saw it play out more like this during the FIRST compilation:


document.writeln

var TimeLeft = -1;

[COLOR="Red"]InitiateTimer();[/COLOR]
[/quote]


it shouldnt do that, but it does. however, when you refresh IE, it appears to start playing by the rules(?) and then timeleft is declared AFTER the iniatetimer function is called. since that happens, when initiatetimer is called, it has the correct compilation value of "-1", and then thats why your code doesnt work as intended.

the solution in both cases is to move initiatetimer to any place AFTER you define "timeleft".

but we are still left with wondering why FF and IE compile the code improperly during the first run (and all subsequent runs for FF)....????
×

Success!

Help @destinetics spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.3,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...