JsTree Open a node then select a child node (using json_result)

Question

I am having trouble with a JsTree I am using in an MVC2 project. I would like to create a function to deselect/close all nodes on the tree. Then open a specific node, and se

Answer 1

hope this might help and sorry I am not using json. I am using jstree together with function to open nodes by clicking on elements outside from the html of jstree.

each node in our setup is like a webpage, so on the homepage of the dashboard we have list of recently edited pages.

each of those links has this javascript to execute

Edit

where 339 is the id of the page we want to edit

and this is fhe function that used to be executed

function selectLeftNavNode(node) {
        $('#demo').jstree('deselect_all');
        $('#demo').jstree('select_node', '#node_' + node);
}

the problem we noticed recently that if the page recently edited is deep within the tree more specifically in the section that has not been loaded yet it will fail

this is why I decided to make ajax request to the server in order to retrieve all parent id's

changed code below, the ajax in my case will return something like this looking xml

339
338
38

and the function

function selectLeftNavNode(node) {
        $('#demo').jstree('deselect_all');
        if($('#demo').jstree('select_node', '#node_' + node) === false) 
        { 
            // if it is false means that the node is not yet rendered
            // so instead of loading we will require to get list of parent nodes to open in order, then it will become available
            // an ajax call should get us all the nodes
            $.ajax({
                type: "POST",
                dataType: "xml",
                url: your_url_to_php_script',
                data: {node_id:node},
                success: function(data)
                {
                    var remaining_nodes = new Array();
                    var paths_count = $(data).find('response').find('path').length;
                    for(var x=1;x<=paths_count;x++){
                       remaining_nodes[x-1] = $(data).find('response').find('paths path:nth-child('+x+')').text(); 
                    }

                    open_nodes_step_by_step(remaining_nodes);
                }
            });
        }
    }

and in addition to that a function that is looped through on callbacks from open_node, the function opens node by node and when it hits the last entry that should be the actual node id we want to select it will use select_node instead

function open_nodes_step_by_step(remaining_nodes)
{
    var nodes = remaining_nodes.slice();
    tree = jQuery.jstree._focused();
    if(nodes.length > 1){
        var nodes_left = remaining_nodes.slice();
        nodes_left.pop();
        var to_open = nodes.length - 1;
         tree.open_node(document.getElementById('node_' + nodes[to_open]), /*CALLBACK*/ function () {
            open_nodes_step_by_step(nodes_left);
         });
    }
    else{
        tree.select_node('#node_' + nodes[0]); 
    }
} 

i have tested my solution with IE8, FF and Chrome all seems to be working just fine, on top of that i use jQuery v1.10.1 and jsTree 1.0-rc1 (unfortunately as the code has been there for years now and it has all that database and other integrations i decided not to change to newer versions, it works)

hope I have helped someone

Tom