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 doGetAddressContacts(), 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.

var companyAddrURL = "xxxxxxxx.php?companyID=" + companyID;
/****MORE DETAILED COMPANY LOOKUP (ADDRESSES)****/
new Ajax(companyAddrURL, {
        method: 'get',
        onComplete: function(request) {
            //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>Addresses For This Company</b></center>";
                /****ADDRESS INFORMATION OUTPUT****/
                for(var i=0; i<addrArray.length; i++) {
                    var addrObj = Json.evaluate(addrArray[i]);
                    $('companyDiv').innerHTML += "<b>Address " + (i+1) + ": </b><br />"
                    //Address 1
                    if(addrObj.addr1 != "") {
                        $('companyDiv').innerHTML += addrObj.addr1 + "<br />";
                    }
                    //Address 2
                    if(addrObj.addr2 != "") {
                        $('companyDiv').innerHTML += addrObj.addr2 + "<br />";
                    }
                    //City, state, zip
                    $('companyDiv').innerHTML += addrObj.city + " " + addrObj.state + " " + addrObj.zip + "<br />";
                    //Country
                    if(addrObj.cntry != "") {
                        $('companyDiv').innerHTML += addrObj.cntry + "<br />";
                    }
                    //Phone
                    if(addrObj.phone != "") {
                        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 />";
                    doGetAddressContacts(addrObj.addressid);  // <==Function call here
                }
                //Add separator and get opportunities information
            }
        }
}).request();                            
 
function doGetAddressContacts(addrID) {
    //Contacts at this address
    var contactsURL = "xxxxxxxx.php?addrID=" + addrID;
    /****CONTACTS ASSOCIATED WITH THIS ADDRESS****/
    new Ajax(contactsURL, {
            method: 'get',
            onComplete: function(request) {
                if(request == "No contacts for this address.") {
                    $('companyDiv').innerHTML += request + addrID + "<br />";
                }
                else {
                    $('companyDiv').innerHTML += "<b>Contacts 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&fName=' + firstName + '&lName=' + lastName + '">' + firstName + " " + lastName + "</a>, ";
                        }
                        else {
                            $('companyDiv').innerHTML += '<a href="xxxx.php?method=byName&fName=' + firstName + '">' + firstName + "</a>, ";
                        }
                    }
                    //Add last entry to the list, URL encoded but without a comma at the end
                    var namesArray = contactsArray[contactsArray.length-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&fName=' + firstName + '&lName=' + lastName + '">' + firstName + " " + lastName + "</a>";
                    }
                    else {
                        $('companyDiv').innerHTML += '<a href="xxxx.php?method=byName&fName=' + firstName + '">' + firstName + "</a>";
                    }                                                        
                }
                $('companyDiv').innerHTML += "<br />";
            }
    }).request();    
}                        
 

[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?