I've spent a while trying to figure this one out. I'm sure someone with the right experience will be able to see the issue, but I just can't understand why it's not working consistently.
Basically, all this does is make two calls. It gets a number when the page loads. Then when the user submits a form, it makes a 2nd call, which tells my PHP file to simply add 1 to the current total number of submissions.
It works most of the time, and it even seems to work for me in IE7 and IE8 (sort of - it seems to cache the number somehow, so you can only tell it's been updated from a different browser).
EDIT: I've only tested IE7 and IE8 using IE9's developer tools, haven't tried on an actual install of those myself.
$(document).ready(function() {
var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
var url = "counter.php?myaction=getcount";
request.open('GET', url, true);
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
updateCounter(request.responseText);
}
};
request.send(null);
});
function doNothing() {};
function addCount() {
var request2 = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest;
var url2 = "counter.php?myaction=addcount";
request2.open('GET', url2, true);
request2.onreadystatechange = function() {
if (request2.readyState == 4) {
request2.onreadystatechange = doNothing;
updateCounter(request2.responseText);
$('#stcPetitionForm').submit();
}
};
request2.send(null);
}
function updateCounter(numSubmissions) {
$("#myCounter").html("<p>" + numSubmissions + "</p>");
}
GET requests are cached. Are you setting no cache headers on the serverside?
This is a fairly well documented issue. How to prevent Ajax/javascript result caching in browsers? provides some good solutions you could try.
This happens because GET requests are cached.
Example of how to avoid caching:
var d = new Date();
var url2 = "counter.php?myaction=addcount&time=' + d.getTime();
// you'd apply to all your url's not just url2
To Demonstrate the getTime:
function postTime(){
var d = new Date();
console.log(d.getTime());
}
setInterval(postTime,1000);