-1

My code is as follows - 

<div class="huge">
<?php echo date ("g:i:s A"); ?>
</div>

How do i set <div class="huge"> to refresh every second?

WebDev
  • 43
  • 1
  • 6
  • 1
    Could you be more specific, @WebDev. What is the need for updating it every second..? – praveenkrishp Sep 13 '16 at 16:59
  • You would need to learn about [Ajax](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). – epascarello Sep 13 '16 at 17:01
  • 1
    Ajax would not be useful really, unless there is a reason to using it, I'd highly suggest using something like JavaScript to do this. – FluxCoder Sep 13 '16 at 17:02
  • @FluxCoder Um, how else would you update a section of a page with Data from the server? If the OP is just updating the time, than yeah, there is no need for the Ajax call. – epascarello Sep 13 '16 at 17:02
  • Sorry, I thought you were just displaying the date. – FluxCoder Sep 13 '16 at 17:03
  • PS: if you are using ajax, you may want to think about using `setTimeout()` instead of `setInterval()` or you may run into ajax requests not completing by the time another is sent: http://stackoverflow.com/questions/38283721/live-update-get-request/38283741#comment64004522_38283741 The answer by @FluxCoder would be a better choice if Ajax is required, IMHO. – Rasclatt Sep 13 '16 at 18:33

4 Answers4

2

Assuming that you need to get the update from the server (noted the PHP code in your original post), there are two things you need to implement:

  1. A Server-Side script (in this case written in PHP) to be requested by the client for fresh data.
  2. A Client-Side javascript to fetch fresh data from the server and update your div.

Let's make an example.

index.php

 <html>
    <head>
        <title>My date updater</title>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    </head>
    <body>
        <div class="huge"><?php echo date ("g:i:s A"); ?></div>
    </body>
 </html>

Javascript (using jQuery)

setInterval(function(){
   $.ajax({
        url:'loadData.php'
   }).done(
        function(data){
            $('.huge').html(data);
   });
},1000);

loadData.php

<?php echo date ("g:i:s A"); ?>

Initially your page named in this example index.php will load and show the initial date (using a bit of php code inline).

Then the javascript will start to get data from the server (using an ajax request to loadData.php) every second and the div will be updated with the fresh data.

Hope it helps a bit!

P.S: Date and time information can also be fetched using pure javascript code on the client-side, but for some applications the date and time information on the client-side is not reliable enough since it relies on the date and time settings that are set by the client browser.

codelock
  • 747
  • 5
  • 8
1

You could use Ajax, something like this:

If it's just simple text, or simple HTML being loaded then you could use

setInterval(function(){
    $("#huge").load("now_playing.php");
    ...
}, 5000);

You could also use something like:

function reload() { 

jQuery.ajax({
    url: "fetch_message.php",
    type: "POST",
    success:function(data){
        $('#huge').innerHTML(data);
        setTimeout(function(){
            reload()
        }, 1000);
    }
});
FluxCoder
  • 1,266
  • 11
  • 22
0

This will update the content of the element with id="huge" every second. you don't need any initial php value. If you need other elements like minutes and seconds of course you can add dt.getMinutes() and dt.getHours() to the string.

<div id="huge"></div>

<script language="javascript">
function refreshSomething(){
var dt = new Date();
document.getElementById('huge').innerHTML = dt.getSeconds();
}


setInterval(function(){
    refreshSomething() // this will run after every second
}, 1000);
</script>
Ast
  • 337
  • 1
  • 4
  • 17
0

This works too - 

<script>function getTime(){
  var date = new Date();
  date.setTime(Date.now());

  return (date.getHours() % 12) + ':' + leadingzero(date.getMinutes()) + ':' + leadingzero(date.getSeconds()) + (date.getHours() < 12 ? ' AM' : ' PM'); ; 
}

function leadingzero(n) {
  return (n < 10) ? ("0" + n) : n;
}

function updateDiv(){
  var d = document.document.getElementsByClassName('yourDivClassname')[0];
  d.innerHTML = getTime();
}

setInterval(updateDiv, 1000);</script>
WebDev
  • 43
  • 1
  • 6