Два вызова функции ajax одним кликом

Question

У меня есть несколько папок в элементе div, и содержимое этих папок отображается в виде дерева (при нажатии маленькой кнопки «плюс») с использованием следующего кода:

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

при нажатии папки, ее содержимоепоказано в другом div, параллельно ему, используя следующий код:

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

Теперь я хочу, чтобы, когда я нажимал на имя папки, ее содержимое должно было загружаться в div параллельно с ним и сдочерние узлы также должны быть видны или расширяться одновременно.Любая помощь будет оценена

Answer 1

Просто сделайте два Ajax-звонка.Ajax-вызовы асинхронны, и вы можете делать столько, сколько захотите.Например, вы можете сделать что-то вроде этого:

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

Вызовите эту функцию из функции onclick, и это должно сработать.Вы также можете вкладывать вызовы функций.Например, если вы ожидаете данные от первого вызова, поместите второй вызов ajax в обратный вызов первого и выполните все обновления.Вам не нужно ждать, пока второй вызов ajax вернется, чтобы обновить DOM.

Вы также можете сделать отдельный вызов ajax для каждого дочернего узла, и если вы хотите сделать это для всех дочерних узлов.узлы, вам придется выполнить некоторую рекурсию, например:

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

Для этого уже созданы плагины.Я знаю, что у jQuery есть один для его структуры.Я построил свой, потому что это было не совсем то, что я хотел.Надеюсь, это поможет!