using populated xml element from ajax

Question

I have created a javascript object and associated method which looks very similar to this. "getUserInfo" is executed in $().ready(function(){}

function userObject(userId)
{
    this.userId = userId;

    this.getUserMachineList = function(infoId, machineListId)
    {
        jQuery.post(machDBPHPPath + "/listAllUserMachineAccess.php",
            { userId : this.userId, sid : Math.random() },
            function(xmlDoc)
            {
                var userMachineListXml = document.createElement("xml");
                //populate serialized xml in dom element here
            }
    });
}

I am trying to read the content of the populated xml element, in populatePage(), see below.

The problem is (I'm sure many of you have seen this before), is that the xml element created by "getUserInfo" does not exist when I call populateUserPage, which is doing further ajax calls based on information in this xml element.

$().ready(function()
{
    //create sessionUser here..
    sessionUser.getUserMachineList(USER_MACHINE_INFO_ID, USER_MACHINE_XML_ID);
    populatePage();
});

I've used setTimeout with populatePage, as a workaround in the past, but don't like this- it's a hack, and doesn't always work.

Ideally there's some method to wait for this id to exist in the DOM that I don't know about, which would be great, but haven't found as of yet..

Or this could be a general web-design flaw, and I should redesign my server side code to take into consideration this asynchronous-ness?

Thanks for your help..

-Larry

Answer 1

I may be confused about the problem, but why not move your ajax code into the $(docuement).ready function. Then, add a callback method to your ajax call that will trigger populatePage()?

Answer 2

The idea behind keeping my code out of the ajax callback of the function getUserMachineList was to keep this code generic for other pages, with different doms/formats/purposes. The solution ended up being simple- I use "eval" in the callback of getUserMachineList, and take as an argument of getUserMachineList the specific function I want to use to populate this page- "populatePage". Here's the code:

//from a global js file
this.getUserMachineList = function(infoId, machineListId, jsCmd, jsArg)
{
    jQuery.post(machDBPHPPath + "/listAllUserMachineAccess.php",
        { userId : this.userId, sid : Math.random() },
        function(xmlDoc)
        {
           var userMachineListXml = document.createElement("xml");
           //populate serialized xml to element

           //do page specific stuff here, after my xml element is populated
           eval(jsCmd + "(\"" + jsArg + "\")");
        });
}

//from my page specific js file, loaded after the above code. the function 
//"populatePage" takes this serialized xml created by getUserMachineList and
//populates my page appropriately
$().ready(function()
{
    sessionUser = new userObject(getUserIdFromCookie());
    sessionUser.getUserMachineList(USER_MACHINE_INFO_ID, USER_MACHINE_XML_ID,
       "populatePage","");
});

It seems you can chain together functions in the callback with this pattern. Not ideal, but like it much better than a setTimeout hack..

thanks much and it's good to be on the show-

-Larry