I've been diving deep into this problem for quite some time now. I have a feeling that someone with the right expertise will be able to pinpoint the issue, but for some reason, it's just not clicking for me.
The basic functionality here revolves around making two API calls. The first call fetches a number when the page loads. Then, upon form submission by the user, a second call is made to increment the total count of submissions in my PHP file.
On most occasions, this setup works flawlessly. Surprisingly, it even seems to function properly on IE7 and IE8 (with some quirks - there appears to be caching involved, leading to updates being reflected only in different browsers).
EDIT: I've tested compatibility with IE7 and IE8 solely through the developer tools provided by IE9; haven't run it on actual installations of those versions 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>");
}