I have an app that display's the current time when a page opens. I would like that time to update every 30 seconds. I've read about prototype's Ajax.PeriodicalUpdater and it seems to be an answer. This is how I achieve the static time display on page load with php:
<tr>
<td>
<input class="standard" type="text" name="start_time"
value="<?php echo prev_end();?>">
<!--prev_end is last end time from database-->
</td>
<td>
<input class="standard" type="text" name="end_time"
value="<?php echo $now;?>">
<!--$now = date("G:i");-->
</td>
This is what I've attempted with prototype:
<script type="javascript">
new Ajax.PeriodicalUpdater("updater", "unow.php", {frequency : 30});
</script>
...
<tr>
<td>
<input class="standard" type="text" name="start_time"
value="<?php echo prev_end();?>">
</td>
<td>
<input id="updater" class="standard" type="text" name="end_time"
value="">
</td>
Where "unow.php" does this
<?php
$unow=date("G:i");
echo $unow;
?>
It seems that I don't need a callback to put the value from unow.php into the input "updater" since PeriodicalUpdater calls for an element id. What am I missing?
I have an app that display's the current time when a page opens. I would like that time to update every 30 seconds. I've read about prototype's Ajax.PeriodicalUpdater and it seems to be an answer. This is how I achieve the static time display on page load with php:
<tr>
<td>
<input class="standard" type="text" name="start_time"
value="<?php echo prev_end();?>">
<!--prev_end is last end time from database-->
</td>
<td>
<input class="standard" type="text" name="end_time"
value="<?php echo $now;?>">
<!--$now = date("G:i");-->
</td>
This is what I've attempted with prototype:
<script type="javascript">
new Ajax.PeriodicalUpdater("updater", "unow.php", {frequency : 30});
</script>
...
<tr>
<td>
<input class="standard" type="text" name="start_time"
value="<?php echo prev_end();?>">
</td>
<td>
<input id="updater" class="standard" type="text" name="end_time"
value="">
</td>
Where "unow.php" does this
<?php
$unow=date("G:i");
echo $unow;
?>
It seems that I don't need a callback to put the value from unow.php into the input "updater" since PeriodicalUpdater calls for an element id. What am I missing?
Share Improve this question edited Jun 11, 2012 at 10:54 James Allardice 166k22 gold badges334 silver badges315 bronze badges asked Dec 3, 2008 at 18:41 kevtroutkevtrout 4,9846 gold badges35 silver badges34 bronze badges4 Answers
Reset to default 3Unless you want your time output to always match the timezone of the server, you could do this very quickly with a bit of Javascript on the client side and skip contacting the server entirely.
<html>
<body onload="init();">
<div id=time></div>
</body>
</html>
<script type=text/javascript>
function init()
{
updateTime();
window.setInterval(updateTime,30000);
}
function updateTime()
{
var time = document.getElementById('time');
time.innerText = new Date().toLocaleString();
}
</script>
This can be acplished without hitting up the server. Prototype's PeriodicalExecuter class encapsulates JavaScript's setInterval function, which allows you to run a JavaScript function every X seconds.
time.html
<html>
<head>
<title>Time</title>
<script type="text/javascript" src="time.js">
</head>
<body>
<span id="timeDisplay"></span>
</body>
</html>
time.js
document.observe("dom:loaded", function() {
new PeriodicalExecuter(updateTimeDisplay, 30);
});
updateTimeDisplay = function(pe) { // accepts the PeriodicalExecuter instance
var now = new Date();
$('timeDisplay').innerHTML = now.toString();
};
Probably Prototype's Ajax.Updater changes the content of the element, not an input's value.
Try changing the
<input id="updater" class="standard" type="text" name="end_time"
value="">
to
<span id="updater"></span>
But as others have suggested, hitting the server each 30 seconds only to update the time is overkill. If you wan't to display the time in the server timezone just create the input with the server time when building the page and update this time with a setInterval from javascript.
Thanks for the input. You guys pointed me to javascript's native ability to feed the time to an input box. In the end, this 24-hour clock solution from w3schools was what worked for me.
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
// add a zero in front of numbers<10
m=checkTime(m);
s=checkTime(s);
document.getElementById('endtime').value=h+":"+m;
t=setTimeout('startTime()',500);
}
function checkTime(i)
{
if (i<10)
{
i="0" + i;
}
return i;
}
</script>
</head>
<body onload="startTime()">
Then this in the body:
<input id="endtime" class="standard" type="text" name="end_time" value="">