AJAX PHP two div content

[smstew]

I have two calls that work fine independently. When I implement them both on the same page I am getting a "document.getElementById(..) is null or not and object" error. I first call getStateProvince(str) then I call getDistributors(strd). For some reason the script is not passing my second pageElement call.


Here is the code.

function callAHAH(url, pageElement, callMessage) {
document.getElementById(pageElement).innerHTML = callMessage;
try {
req=new XMLHttpRequest(); /* e.g. Firefox */
} catch(e) {
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
/*some versions IE */
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
/*some versions IE */
} catch (e) {
req = false;
}
}
}
req.onreadystatechange = function(){responseAHAH(pageElement);};
req.open("GET",url,true);
req.send(null);
}

function getStateProvince(str){

if (str==""){
alert("Please select a Country.");

} else {
var strurl="getstate.php";
strurl=strurl+"?id="+str;
strurl=strurl+"&sid="+Math.random();
callAHAH(strurl,'displaystateprovince','Please wait; finding your selection..');
}
}


function getDistributors(strd){
/*alert(str);*/

if (strd==""){
alert("Please select a State/Province");

} else {
var strdurl="getdistributors.php";
strdurl=strdurl+"?id="+strd;
strdurl=strdurl+"&sid="+Math.random();
callAHAH(strdurl,'displaydistributors','Please wait; finding your distributors..');
}

}


Thanks for all of you help.

[jmajews1]

In the callAHAH function, the req variable has global scope because you are missing "var req" declaration within the function scope. Since it is global, the first function creates the req object and sets the onreadystate change and executes the AJAX call asynchronously. The second call also sets req which overrides the previous reference and causing your issue.

To fix just declare your req variable to be local scope.

function callAHAH(url, pageElement, callMessage) {
var req;
....
}