Nested AJAX Calls Problem

[dhsieh]

I am trying out nested AJAX calls for the first time, but I seem to have hit a snag. The code snippet is the outer AJAX call and a function, it gathers information about a company.
As we get towards the bottom of the onComplete function, there is a call to doGetAddressCon tacts(), which accepts an address ID. This then returns a list of contacts at that address.
What I am trying to do is for each address that it retrieves and outputs, as it gets down to the fax, I want to do another AJAX call to retrieve all contacts for that address, then output the results in the line after the fax.

What happens when I try this is it gathers contacts for each address, puts everything in its own line fine, but it outputs EVERYTHING after all of the addresses.

I.E.
Address 1
Blah
Blah
Address 2
Blah
Blah
Address 3
Blah
Blah
Contacts for Address 1: xxxxxxx
Contacts for Address 2: xxxxxxx
Contacts for Address 3: xxxxxxx

When I want the output to be:
Address 1
Blah
Blah
Contacts for Address 1: xxxxxxx
Address 2
Blah
Blah
Contacts for Address 2: xxxxxxx
Address 3
Blah
Blah
Contacts for Address 3: xxxxxxx

I apologize for the long and probably confusing post, but if anyone can understand this madness I thank you for your help.

I am using the Mootools Library 1.11 by the way.

[code=javascript]
var companyAddrURL = "xxxxxxxx.php?c ompanyID=" + companyID;
/****MORE DETAILED COMPANY LOOKUP (ADDRESSES)****/
new Ajax(companyAdd rURL, {
method: 'get',
onComplete: function(reques t) {
//Split return string on unique delimiter into array
var addrArray = request.split(" |||");
//First element contains error message if no addresses were found
if(addrArray[0] == "No addresses found for this company.") {
$('companyDiv') .innerHTML += addrArray[0];
}
else { //At least one address was found
$('companyDiv') .innerHTML += "<center><b>Add resses For This Company</b></center>";
/****ADDRESS INFORMATION OUTPUT****/
for(var i=0; i<addrArray.len gth; i++) {
var addrObj = Json.evaluate(a ddrArray[i]);
$('companyDiv') .innerHTML += "<b>Address " + (i+1) + ": </b><br />"
//Address 1
if(addrObj.addr 1 != "") {
$('companyDiv') .innerHTML += addrObj.addr1 + "<br />";
}
//Address 2
if(addrObj.addr 2 != "") {
$('companyDiv') .innerHTML += addrObj.addr2 + "<br />";
}
//City, state, zip
$('companyDiv') .innerHTML += addrObj.city + " " + addrObj.state + " " + addrObj.zip + "<br />";
//Country
if(addrObj.cntr y != "") {
$('companyDiv') .innerHTML += addrObj.cntry + "<br />";
}
//Phone
if(addrObj.phon e != "") {
if(addrObj.ext != "") {
var extString = " Ext " + addrObj.ext;
}
else {
var extString = "";
}
$('companyDiv') .innerHTML += "<b>Phone: </b>" + addrObj.phone + extString + "<br />";
}
//Fax
if(addrObj.fax != "") {
$('companyDiv') .innerHTML += "<b>Fax: </b>" + addrObj.fax + "<br />";
}

//Add an extra line break to separate the addresses more clearly
$('companyDiv') .innerHTML += "<br />";
doGetAddressCon tacts(addrObj.a ddressid); // <==Function call here
}
//Add separator and get opportunities information
}
}
}).request();

function doGetAddressCon tacts(addrID) {
//Contacts at this address
var contactsURL = "xxxxxxxx.php?a ddrID=" + addrID;
/****CONTACTS ASSOCIATED WITH THIS ADDRESS****/
new Ajax(contactsUR L, {
method: 'get',
onComplete: function(reques t) {
if(request == "No contacts for this address.") {
$('companyDiv') .innerHTML += request + addrID + "<br />";
}
else {
$('companyDiv') .innerHTML += "<b>Contact s for addrid: </b>" + addrID;
var contactsArray = request.split(" |");

//Loop through all but last entry, URL encode each name, and add a comma to the end
for(var i=0; i<contactsArray .length-1; i++) {
var namesArray = contactsArray[i].split(" ");
//First name
var firstName = namesArray[0];
//Check if there's a last name for this contact
if(namesArray[1]) {
var lastName = namesArray[1];
}
//If last name exists, the link is different than if not
if(namesArray[1]) {
$('companyDiv') .innerHTML += '<a href="xxxx.php? method=byName&f Name=' + firstName + '&lName=' + lastName + '">' + firstName + " " + lastName + "</a>, ";
}
else {
$('companyDiv') .innerHTML += '<a href="xxxx.php? method=byName&f Name=' + firstName + '">' + firstName + "</a>, ";
}
}
//Add last entry to the list, URL encoded but without a comma at the end
var namesArray = contactsArray[contactsArray.l ength-1].split(" ");
//First name
var firstName = namesArray[0];
//Check if there's a last name for this contact
if(namesArray[1]) {
var lastName = namesArray[1];
}
//If last name exists, the link is different than if not
if(namesArray[1]) {
$('companyDiv') .innerHTML += '<a href="xxxx.php? method=byName&f Name=' + firstName + '&lName=' + lastName + '">' + firstName + " " + lastName + "</a>";
}
else {
$('companyDiv') .innerHTML += '<a href="xxxx.php? method=byName&f Name=' + firstName + '">' + firstName + "</a>";
}
}
$('companyDiv') .innerHTML += "<br />";
}
}).request();
}
[/code]

[acoder]

You're just appending to the companyDiv element. You need to include a span or something and a reference to that span and append to that rather than the containing div element.

[dhsieh]

I was trying to set it up so that the function inside the for loop would append the information onto each address entry after the Fax line. Do I not have that set up correctly? Thank you for your reply.

[dhsieh]

It seems like I've created a closure with the AJAX call being in the for loop, and that's the reason why everything is returned at once at the end of all loop cycles instead of once per. Can anyone shed some light on how to fix this?