ansaurus

Question

Display Current Time each minute (with Prototype's Ajax.PeriodicalUpdater ?)

Answer 1

+1 A:

Unless 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>

Barry Fandango 2008-12-03 19:02:51

while this solution didn't work out of the box, it did point me towards using stand-alone javascript to get what I was after. This is why I marked it as the answer.

kevtrout 2009-01-01 16:51:53

Answer 2

A:

This can be accomplished 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();
};

thoughtcrimes 2008-12-04 00:47:57

Answer 3

A:

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.

Serhii 2008-12-04 18:27:45

Answer 4

A:

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="">

kevtrout 2008-12-15 18:12:53

ansaurus

tags:

views:

answers:

Display Current Time each minute (with Prototype's Ajax.PeriodicalUpdater ?)

related questions