Question

I have a jstree tree that all the tree items are loaded using ajax calls to my server to populate the children of each folder. I am trying to build a function that will drill down through the tree and select a child depending on what I pass into the function. I am currently using the following function to do this, but my $.when(…).done(…) function is not waiting for the open to occur and then can’t load any children below it.

function openNodes(tree, nodesToOpenRaw, selectedNode) {
    var treeObj = $(tree);
    treeObj.one('loaded.jstree', function() {
        openNodesRaw(treeObj, nodesToOpenRaw, selectedNode);
    });
}

function openNodesRaw(tree, nodesToOpen, selectedNode) {
    if (tree.jstree('is_open', nodesToOpen[0])) {
        goToNextNode(tree, nodesToOpen, selectedNode);
    } else {
        $.when(tree.jstree("open_node", nodesToOpen[0])).done(function () {
            if (nodesToOpen[0] == null) {
                goToNextNode(tree, nodesToOpen, selectedNode);
                return;
            }
            goToNextNode(tree, nodesToOpen, selectedNode);
        });
    }
}

function goToNextNode(tree, nodesToOpen, selectedNode) {
    if (nodesToOpen.length > 0 && Object.prototype.toString.call(nodesToOpen) === '[object Array]') {
        var newNodesToOpen = nodesToOpen.slice(0);
        newNodesToOpen.shift();
        openNodesRaw(tree, newNodesToOpen, selectedNode);
    } else {
        tree.jstree("select_node", selectedNode, true);
        tree.unbind('ajaxSuccess');
    }
}

Why is the $.when function waiting for the ajax call of tree.jstree(“open_node”,….) to finish before continuing on with the next function?

Answer 1

The $.when() expects its arguments to be jQuery $.Deferred.

Presumably tree.jstree() returns something else.