CODEWITHSUNDEEP
javascriptphp
Niels
Niels

Reputation: 1006

refresh page upon file change

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);    
     }

?>

Upvotes: 1

Views: 2409

Answers (2)

Wolverine
Wolverine

Reputation: 1702

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!

Upvotes: 1

kitti
kitti

Reputation: 14794

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. :)

Upvotes: 0

Related Questions