deux fonctions ajax appelle clic

Question

J'ai quelques dossiers dans un div et le contenu de ces dossiers sont affichés dans l'arborescence (si petit bouton plus est cliqué) en utilisant le code suivant:

echo '<span class="toggle" onclick="getchildren(\''.$objectnode["fid"].'\', \'childdiv'.$objectnode["fid"].'\');" ></span>'; 

lorsque le dossier est clique dessus, son contenu sont présentés dans un autre div, parallèle à l'aide du code ci-dessous:

<a href="#" onClick="getcontents('<?php echo $objectnode["fid"]; ?>', 'foldercontentsdiv', '<?php echo $objectnode["path"].$objectnode["object_name"]."/" ?>','foldercontents');" class="<?php echo $objectnode["object_type"]=='folder'? 'folder': 'document'; ?>"><span><?php echo $objectnode["object_name"]; ?></span></a> 

maintenant, ce que je veux faire est, quand je clique sur le nom du dossier, son contenu doit être charge dans div parallèle comme ainsi que ses nœuds enfants doivent également être visibles ou se développer en même temps. Toute aide sera appréciée

Answer 1

Il suffit de faire deux appels ajax. Les appels Ajax sont asynchrones et vous pouvez en faire autant que vous le souhaitez. Par exemple, vous pouvez faire quelque chose comme ceci:

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); 
} 

Appelez cette fonction à partir de votre fonction onclick et cela devrait faire l'affaire. Vous pouvez également imbriquer les appels de fonction. Par exemple, si vous attendez des données du premier appel, placez le deuxième appel ajax dans le rappel du premier appel et effectuez toute la mise à jour. Vous n'aurez pas besoin d'attendre le second appel ajax pour retourner mettre à jour le DOM.

Vous pouvez également faire un appel ajax pour chaque nœud enfant, et si vous voulez le faire pour tous les nœuds enfants, vous devrez faire quelques récursion, tels que:

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]); 
    }; 
} 

Il y a déjà des plugins faits pour ça. Je sais que jQuery en a un pour son cadre. J'ai construit le mien parce que ce n'était pas exactement ce que je voulais. J'espère que ça aide!