refresh page upon file change

Question

I want javascript to refresh the page when a modification has been made to the page- file on the server.

I use api.php (see below) to get the file modification time of the file and return it as json.

So getting data from api.php is no problem but how can I compare an old value to a new value in javascript and refresh the page if this is the case.

Here is what I have done so far:

var oldVar = 0; 

setInterval(function(){ 
$.getJSON('api.php', function(data) {
    console.log(data);

    var obj = data;

    var filedate = obj.filedate;



    if (oldVar != filedate) {
            location.reload();
    };

    var oldVar = filedate;


});
}, 1000); // 1 second

Obviously this makes the page refresh every second but I have no idea how to proceed.

Here is the PHP code I use for getting the data, I use the filemtime to check the file modification time on the server.

<?php

     $filename = "test.php";

     if (file_exists($filename)) {
          $dateFile = date("s", filemtime($filename));
          $dateOfFile = array('filedate' => "$dateFile"); 

          echo json_encode($dateOfFile);    
     }

?>

I'd suggest doing the calculations and handle redirects in php rather than client side — Professor Abronsius, Jan 02 '17 at 19:43
Is your problem that oldVar is allways 0 and not your new value for oldVar? — Hokusai, Jan 02 '17 at 19:47
@hokusai thanks for your reply and no that is not the problem, all I want is javascript to refresh the page when a modification has been made to the page. upon refresh api.php returns a json value that changes whenever I make a change test.php. I want javascript to check this page every second. when it sees a change I want it to trigger a refresh. — Niels, Jan 02 '17 at 20:11

score 1 · Accepted Answer · edited May 23 '17 at 10:30

JavaScript

var interval = setInterval(function(){ 
    $.getJSON('api.php', function(data) {
        if (getCookie('old_modification') != data.filedate) {
            window.location.reload();
        };

        setCookie('old_modification', data.filedate);
    });
}, 1000);

function setCookie(name, value) {
    var cookie_string = name + "=" + encodeURI(value);
    document.cookie = cookie_string;
}

function getCookie(cookie_name) {
    var results = document.cookie.match('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');
    return results ? unescape(results[2]) : null;
}

if(getCookie('old_modification') === null) {
    setCookie('old_modification', 0);
}

PHP

$filename = "test.php";

if (file_exists($filename)) {
    echo json_encode(array(
        'filedate' => filemtime($filename)
    )); 
}

Since you're reloading the page every time, the oldVar value is always set to 0 and it doesn't take effect when you check its value with the data received from AJAX in the timer.

Here, you need some storage to preserve and update the old value. I have preferred using cookie for that purpose. I've got no other option except another one which is to update the certain part of the page rather than reloading the page itself.

I have used this reference to get and set cookies using JavaScript since it is simple and easier than mine and made some changes into that according to your requirements.

Coming back to PHP part, I'm not sure why you use s format in date function. It only gets you seconds from the modification time of the file which is not reliable since seconds might be same at some point. For instance, you modify a file at 11:30:50 and again modify a file at 11:31:50 and it won't take effect in reloading the page. Also, I know it's a very rare scenario. Even though, stick with filemtime alone since that returns unix timestamp and not going to be same anytime.

Hope it helps!

I've learned quite a lot from your awnser! Thank you very much! — Niels, Jan 03 '17 at 11:01

score 0 · Answer 2 · answered Jan 02 '17 at 19:44

0

You're using date("s", ...) which just returns the seconds part of the time - i.e. right now it is 11:42:16 in my timezone, so that would return the value "16". What you want is the total seconds since epoch, which you can get with the date() function, but will be easier with time() which returns an integer.

Also in your JS code, you're redefining variables with var - don't do this. :)

answered Jan 02 '17 at 19:44

kitti

14,663
31
49

About time() and date() part, it really doesn't matter in this case. it works as intended. The chances of me saving a file at the precise second are very slim. The PHP part is not the problem though. Also I am not sure how I managed to screw that up but corrected the mistake. – Niels Jan 02 '17 at 20:00

refresh page upon file change

2 Answers2