Ivo
Ivo

Reputation: 2636

jquery update time

jQuery(document).ready(function() {
function updateTime() {
    $("#wtime").append('<p>Wacht nog: <?php echo $wait_time; ?></p> '); 
}

updateTime();
setInterval(updateTime, 1000); });

I want to update the div #wtime every second now it only shows the time and is not updating it

Upvotes: 0

Views: 7093

Answers (2)

Douglas G. Allen
Douglas G. Allen

Reputation: 2261

My little test.

  <!DOCTYPE html>
  <head>
  <html> 
  <head> 
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
  <script> 
  $(document).ready(function(){
  function updateTime() {
  var currtime = new Date();
  var currtime1 = new Date(currtime.getTime());
  var currtime2 = new Date(currtime.toGMTString());
  var currtime3 = (currtime.getHours() + ":"+ currtime.getMinutes() + ":" + currtime.getSeconds());
  $('#1').html(currtime1);
  $('#2').html(currtime2);
  $('#3').html(currtime3);       
  }
  setInterval(updateTime, 1000); // 1000 miliseconds 
  }); 
  </script> 
  </head> 
  <body>
  <h1>
  <b> 
  <div id="1">The Current time is: </div>
  </br>
  <div id="2">The Current time is: </div>
  </br>
  <div id="3">The Current time is: </div>
  </b> 
  </h1> 
  </body> 
  </html>

Upvotes: 0

juan.facorro
juan.facorro

Reputation: 9920

You have to parse the time you get from the server into a javascript Date() object and then increment that each second.

Here's a working fiddle:

// Make sure $wait_time has a valid format so that Date() can parse it.
// var serverTime  = new Date('<?php echo $wait_time; ?>');
var serverTime = new Date();

function updateTime() {
    /// Increment serverTime by 1 second and update the html for '#time'
    serverTime = new Date(serverTime.getTime() + 1000);
    $('#time').html(serverTime.toGMTString());
}

$(function() {
    updateTime();
    setInterval(updateTime, 1000);
});​

Related HTML:

<div id="wtime">
    <p>Wacht nog: <span id="time"></span></p>        
</div>​

Hope it helps.

Upvotes: 2

Related Questions