Execute JavaScript if HTML file has been updated

Question

I am trying to find a plugin or function in either JavaScript, jQuery, or even PHP if necessary to check every 10 seconds if the page file has been updated and alert() the user if the page has been updated.

Thanks in advance :) Sorry if I'm not clear enough. Comment if you have any questions.

EDIT: In other words using either client or server side scripting, send an AJAX request to the server and determine if the current page opened by the user has been modified on the server and display an alert.

You should share more information about what you are trying to do under what circumstances. What is this for, do you control the page that is being updated, etc. — Pekka, Dec 22 '12 at 20:02
It's not enough info yet. What exactly are you trying to do, and do you control the page that is being updated? — Pekka, Dec 22 '12 at 20:05
Is the potential change of the page provided by an DB update? — sdespont, Dec 22 '12 at 20:07
@Pekka Every 10 seconds I would like an AJAX request to determine if page.html has been modified/updated since the user opened the page. For example if I load page.html at 4:00 and I edit it at 4:01 A message will display to the user saying the page has been updated. — Stephen Cioffi, Dec 22 '12 at 20:07
If you could provide more information it will be good.. Anyways try jQuery live(); and add an timer to reload it every 10 secs or so... — DaGhostman Dimitrov, Dec 22 '12 at 20:08
Do you control the page that is being updated, or is it a third party site that you want to monitor? — Pekka, Dec 22 '12 at 20:08
Is it the page .html itself which is modified or DB information? — sdespont, Dec 22 '12 at 20:09
@DaGhostmanDimitrov I don't want to to refresh the page at a set interval... Only when I, the programmer, edit the HTML file I want to display an alert message. — Stephen Cioffi, Dec 22 '12 at 20:09
@sdespont There is no DB involved, I am trying to detect if the actual .html file has been modified. — Stephen Cioffi, Dec 22 '12 at 20:10
@Pekka page.html file is *similar* to a news feed so if I updated the page manually every few minutes the user knows there is an update so they can refresh the page. — Stephen Cioffi, Dec 22 '12 at 20:12

score 7 · Accepted Answer · edited Nov 25 '13 at 14:01

You can send a http HEAD request to the server every 10 seconds. This will make the server just send the headers not the content. Then you can chech the 'Last-Modified' response header.

The jQuery function $.ajax(); supports a functionality quite similar to this. But rather then checking the Last-Modified http header jQquery sends requests to the server using the http If-Modified-Since header. It then checks if the server responds with response code 304 Not Modified.

This is a short HTML + Javascript example described the jQuery functionality:

<html>
  <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
      var checkUrl="test.txt";
      var firstCheck = false;
      window.setInterval(checkForUpdate, 1000);

      function checkForUpdate() {
          $.ajax(checkUrl, {
              ifModified : true,
              type : 'HEAD', 

              success : function (response) {
                  if(firstCheck === false) {
                      firstCheck = true;
                      return;
                  }
                  $('#output').html('the site has been modified');
              }
          }); 
      }    
   </script> 
  </head>
  <body>
    <div id="output">Not Modified</div>
  </body>
</html>

However, the above jquery example didn't worked for me - using jQuery 1.8 and firefox.(Linux) + the apache2 web server. The success function will be called although the server responds with 304 Not Modified.

So I'll add another working example that implements my first suggestion above, here comes the javascript part:

    var checkUrl="test.txt";
    window.setInterval("checkForUpdate()", 1000);
    var pageLoad = new Date().getTime();

    function checkForUpdate() {
        $.ajax(checkUrl, {
            type : 'HEAD',
            success : function (response, status, xhr) {
                if(firstCheck === false) {
                    firstCheck = true;
                    return;
                }
                // if the server omits the 'Last-Modified' header
                // the following line will return 0. meaning that
                // has not updated. you may refine this behaviour...
                var lastModified = new Date(xhr.getResponseHeader('Last-Modified'))
                    .getTime();
                if(lastModified > pageLoad) {
                    $('#output').html('the site has been modified');
                }
            }
        }); 
    }

I'm not a pro at JavaScript or PHP. Can you provide an example or snippet on how this would be done? — Stephen Cioffi, Dec 22 '12 at 20:05
This script looks great, I'm going to try it later tonight however I noticed in your description you mentioned "page.php" but in your script checkUrl-"test.html/txt". — Stephen Cioffi, Dec 22 '12 at 21:23

Execute JavaScript if HTML file has been updated

1 Answers1

Linked