Ok I want to start by saying that I have checked the other posts I could find on here that were having the same issue I am having but none of them fix my issue, two were down to a simple mistake, and the other was to do with PHP session locking, and I am not using sessions.
Basically I am running two Ajax requests to two different pages and using the separate data in different ways after the main page (calling the requests) has loaded.
In an attempt to simplify the problem I have set up this site here (would have used jsFiddle but it gets all funny with HttpRequests): The calling page | One of the pages being called | The second page being called
The sources of the pages linked above is all the code I am using in my example, nothing more, nothing less. The second ajax call can be turned off in the first link by appending '#off' to the url.
The issue I am seeing in my own private Wamp test server is that both callbacks for the Ajax requests are running but the data passed to the functions is the same where it shouldn't be. Both the first and second callback functions are receiving the responseText from the second call. However, on this web server only the second callback runs, the first one does not run at all unless the second ajaxCall is switched off (#off). There must be some difference between my private server and the online one, but I cant really recreate that. However, there is still an issue and I am guessing that the solution to one will be the solution to both.
Can anyone tell me why this is happening? Am I misunderstanding how HttpRequests work? Or is there just some hole in my code?
EDIT:
Here's the code:
<html>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" >
function ajaxCall(dest, callBack, data, method, async, returnXML) {
method = typeof method !== 'undefined' ? method : "POST";
async = typeof async !== 'undefined' ? async : true;
returnXML = typeof returnXML !== 'undefined' ? returnXML : false;
var ajax;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
returnXML ? callBack(xmlhttp.responseXML) : callBack(xmlhttp.responseText);
}
}
xmlhttp.open(method , dest, async);
if(method == "POST")
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
data === null ? xmlhttp.send() : xmlhttp.send(data);
}
$(document).ready(function() {
ajaxCall("player.htm", function(html) {
$("#player").html("Player:<br>" + html);
}, null);
if(location.hash != "#off") {
ajaxCall("home.htm", function(html) {
$("#home").html("Home:<br>" + html);
}, null);
}
});
</script>
<style type="text/css">
#wrapper {
width: 215px;
}
#wrapper:after {
content: "";
display:none;
clear: both;
}
#player, #home {
width: 100px;
height: 100px;
border: 1px solid black;
margin-right: 5px;
}
#player {float: left;}
#home {float:right;}
</style>
<div id="wrapper">
<div id="player"></div>
<div id="home"></div>
</div>
</html>
Home.htm:
I am the text from home.htm
Player.htm:
I am the text from player.htm
A couple of things to note:
This example is an extremely simplified version of its original application (the resulting problem is the same so there is no sense in me showing the original example as it is a lot of code. That being said, in the actual application one of the pages being requested is displayed and is, in turn, making AJAX requests so running one of the requests inside of the callback of the other isn't really a solution and it seems to be side stepping the issue, as the function 'ajaxCall' surely shouldn't be mixing up the two request objects.
I have not included the original source because I did not want to make an already long post even longer, it is all available at those links however.
Sorry for the really long post, but I had to explain my problem in detail and I have been racking my brains over this for the past couple of days.
You might need to rightclick->reload the page after adding #off to the url to see the changes.
Your
xmlhttpvariable is implicitly global. Use avarstatement for it. Or maybe you just mixed up the identifier with the declared but unusedvar ajax?