Two ajax function calls on single click - ajax

Question

I've some folders in a div and contents of those folders are shown in tree view(when small plus button is clicked) using following code:
echo '<span class="toggle" onclick="getchildren(\''.$objectnode["fid"].'\', \'childdiv'.$objectnode["fid"].'\');" ></span>';
when folder is clicked,its contents are shown in another div,parallel to it using following code:
<span><?php echo $objectnode["object_name"]; ?></span>
Now what i want to do is, when i click on folder name,its contents should be load in div parallel to it as well as its child nodes should also be visible or expand at the same time. Any help will be appreciated

Answer 1

Just make two ajax calls. Ajax calls are asynchronous and you can make as many as you like. For example, you could do something like this:
function ajax(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'yourpage.php', true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
// Your callback code goes here
xmlhttp.responseXML; // this is the response data
}
};
xmlhttp.send(yourdatahere);
var xmlhttp2 = new XMLHttpRequest();
xmlhttp2.open('POST', 'yourpage.php', true);
xmlhttp2.onreadystatechange = function() {
if (xmlhttp2.readyState == 4) {
// Your callback code goes here
xmlhttp2.responseXML; // this is the response data
}
};
xmlhttp2.send(yourdatahere);
}
Call this function from your onclick function and that should do the trick. You can also nest the function calls. For example, if you're waiting on data from the first call, put the second ajax call in the callback from the first and do all of the updating. You won't need to wait for the second ajax call to return to update the DOM.
You could also make a separate ajax call for each child node, and if you want to do that for all of the child nodes, you'll have to do some recursion, such as:
function ajax(parentNode){
var xmlhttp = new XMLHttpRequest();
xmlhttp.open('POST', 'yourpage.php', true);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
// Your callback code goes here
xmlhttp.responseXML; // this is the response data
// do stuff with responseXML
}
};
xmlhttp.send(yourdatahere);
var i;
for(i = 0; i < parentNode.childNodes.length; i++){
ajax(parentNode.childNodes[i]);
};
}
There are already plugins made for this. I know jQuery has one for it's framework. I built my own because it wasn't exactly what I wanted. I hope this helps!