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