current time using ajax not working
I am trying to achieve a dynamic current time on my webpage, showing hour, minutes and seconds. I'm using Ajax but this doesn't seem to be working.
Also, I'm using the Symfony framework.
In the body, I got
<body onload="showCurrentTime()">
Before that:
<script type="text/javascript" src="/js/curr_time.js"></script>
curr_time.js
//Once the document is loaded, execute the showCurrentTIme function
//This is the AJAX function that displays the current time on the screen.
$(document).ready(function(){ showCurrentTime(); });
function showCurrentTime() {
//Call the current time web service,
//grab the time off the server, and apply it to the
//end-user client after waiting for the document to load
$(document).ready(f开发者_C百科unction() {
//Make the call to the XML web service
$.get("currentDateTime.php", function(currentDateTime) {
//Format the time returned by the server
var time = [ $("hour", currentDateTime).text(),
":",
$("min", currentDateTime).text() ];
//Determine how many milliseconds to will wait until
//the time needs to be refreshed again
var refresh = [(60 - $("sec", currentDateTime).text()) * 1000 ];
//Display the time on the end-user client
$("#currentTime").html(time.join(''));
//Set a timer so that the time on the end-user client updates
// in sync with the server time to display the true current time
setTimeout('showCurrentTime()', refresh);
});
});
}
In the same folder, I have the PHP file currentDateTime.php
<?php
#Need to specify that this is an XML document in order for it to work with AJAX
header('Content-Type: text/xml');
#Set variables equal to each part of the date and time
$year = date("Y");
$mon = date("m");
$mday = date("d");
$hour = date("H");
$min = date("i");
$sec = date("s");
#Create the XML document of the current date and time
echo '<?xml version="1.0" encoding="UTF-8"?>' . "\n";
echo '<currentDateTime>' . "\n";
echo "\t" . '<year>' . $year . '</year>' . "\n";
echo "\t" . '<month>' . $mon . '</month>' . "\n";
echo "\t" . '<day>' . $mday . '</day>' . "\n";
echo "\t" . '<hour>' . $hour . '</hour>' . "\n";
echo "\t" . '<min>' . $min . '</min>' . "\n";
echo "\t" . '<sec>' . $sec . '</sec>' . "\n";
echo '</currentDateTime>' . "\n";
?>
And in the body,
<p id="currentTime">--:--</p>
I've been trying to find the error for a long time now, but with no success...
Your showCurrentTime()
function as posted does only one thing: set a $(document).ready()
handler. You want to call it from document ready (which you are already doing), not set another handler inside your function. Just get rid of the extra $(document).ready()
stuff from inside that function as follows:
function showCurrentTime() {
$(document).ready(function() { // DELETE THIS LINE
//Make the call to the XML web service
$.get("currentDateTime.php", function(currentDateTime) {
// rest of your function goes here...
});
}); // DELETE THIS LINE
}
I'm sure that's the main problem.
The second problem is that when you create your refresh
variable you're assigning it to point to an array with one element rather than to a number. Remove the square brackets.
Also, having this line in your JS file:
$(document).ready(function(){ showCurrentTime(); });
and a body onload in your HTML:
<body onload="showCurrentTime()">
is redundant. Pick one (preferably the one in the JS file).
精彩评论