SpaceTree OrgChart- addSubtree via XMLHttpRequest or AJAX not loading

[jbehrnes]

I'm using the SpaceTree to build an interactive OrgChart. When the
space tree loads I'm having the first 3 levels retrieved via AJAX and
display properly. When users click on any node's label in the 3rd
level I'd attempting to load a new subtree and attach it to the
selected node (this new subtree would be the subordinates of the
selected employee).

When the request is made I can track the request and see the JSON data
that is returned. However, when I use the method 'addSubtree' to
attach the data to the selected node the animation cycle fires to
center the SpaceTree, but the retrieved data is not attached or
displayed. I'm using the request method from the SpaceTree example 2.
When the data is retreived I've also tried the 'eval' method w/o any
luck either.

I've tried both an XMLTTHPReqeust and AJAX request to no avail:

XMLHTTPREQUEST:
request: function(nodeId, level, onComplete) {
var xmlHttp;
var subTreeNodes;

if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
else
{
xmlHttp = new ActiveXObject("Microsft.XMLHTTP");
}

xmlHttp.onreadystatechange = function()
{
if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
{
subTreeNodes= xmlHttp.responseText;
subTreeNodes.id = nodeId;
st.addSubtree(nodeId, 'animate');
}
};

xmlHttp.open("POST", "applets/subordinates.php?
selectedEmployee=" + nodeId, true);
xmlHttp.send();

}

AJAX:
request: function(nodeId, level, onComplete) {
$.ajax({
url : 'applets/subordinates.php?selectedEmployee=' +
nodeId,
dataType : 'json',
onSuccess : function(data)
{
var subTreeNodes = data;
subTreeNodes.id = nodeId;
st.addSubtree(nodeId, 'animate');
},
onComplete : function(data)
{
$('#alertDiv').html('Finished Loading Subordinates');
}
});
}

Here is an example of the data retrieved:
{"id" :"54323", "name":"Eric Brown", "data":{"title":"Assistant,
Executive"}, "children":[]}, {"id" :"7889343", "name":"Susan Clayton",
"data":{"title":"Executive Director"}, "children":[]}

I'm assuming that this data should be displayed as a subtree to the
selected node. I'm not sure what I'm missing to have the returned
nodes displayed. The API documentation detailing the method is rather
light. Can anyone explain what I'm missing? Has anyone been able to
use this method or have a working example?

Thanks!

[jbehrnes]

To anyone interested I have found the solution for my particular
problem. Using jQuery I used the 'getJSON' method:

$.getJSON('applets/subordinates.php?did=' + nodeId, function(data)
{
var newNode = data.childData;
var ans = {"id" : nodeId, 'children' : newNode};
onComplete.onComplete(nodeId, ans);
});

Additionally, when I returned my data from the PHP page I wrapped it
so that a single element pointed to it (childData):
{ 'childData' : [ {"id" :"54323", "name":"Eric Brown", "data":

{"title":"Assistant,
Executive"}, "children":[]}, {"id" :"7889343", "name":"Susan Clayton",

"data":{"title":"Executive Director"}, "children":[]} ]}

When the data was retrieved I then grabbed the 'childData' and was
able to process it. When the onComplete.onComplete method was called
it successfully added the subtree.

[Edward Groenendaal]

Thanks, this was invaluable to me for hooking up my java backing bean to infovis via jquery.