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

Question

I am having problems with JsTree which I use in MVC2 project. I would like to create a function to undo or close all nodes in a tree. Then open a specific node and select a specific child node (I have Id values ​​for both).

The problem is that select_node is always called before open_node completes, so node is not selected because the tree has not loaded the data yet and the node identifier does not exist.

At first I tried this function.

$('#demo3').jstree('deselect_all');
$('#demo3').jstree('close_all');
$('#demo3').jstree("open_node", $('#ParentId'), false, true); 
$('#demo3').jstree("select_node", $('#ChildId'));

Then I tried to move the code into the select_node and move_node bindings of the tree, but no luck. At the moment, I'm stuck using setTimeout (), which is a terrible solution.

Does anyone know how I can tell the tree to only select node after the discovery has finished?

Answer 1

You can try passing a function that selects node as a callback, for example:

$('#demo3').jstree('open_node', '#ParentID', function(e, data) {
    $('#demo3').jstree('select_node', '#ChildId');
}, true);

This method select_nodeis called as soon as open_node returns success.

Answer 2

I am currently using it in an MVC4 project.

open_node node JSON ( "core" load_open true), node , DOM - open_node . ( ). node DOM .

jsTree:

"core": {
   "open_parents": true,
   "load_open": true
 }

:

$("iframe#UploadTarget").load(function () {
  var result = jQuery.parseJSON($(this).contents().text());
  if (result.Result == true) {
     $("#uploadDialog").dialog("close");
     var tree = jQuery.jstree._focused();

     /* 
        open_node will open the parent, get the childs from the server 
        (controller) and renders the new item before the callback executed,
        so the jQuery selector will be valid 
     */

     tree.open_node(result.ParentId,/*CALLBACK*/ function () {
          var newNode = $("#" + result.Id);
          tree.select_node(newNode, false, null);
     });

   } else {
      alert(result.Result + ":" + result.ResultDescription);
   }

});//GOOD LUCK :-)

Answer 3

, , json. jstree , html jstree.

node -, .

javascript

<a href="javascript: selectLeftNavNode(339);">Edit</a>

339 - ,

,

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

, , , , ,

ajax , id

, ajax - xml

<?xml version="1.0" encoding="UTF-8"?>
<response>
<paths>
<path>339</path>
<path>338</path>
<path>38</path>
</paths>
</response>

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

, , open_node, node node, , node, select_node

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 tested my solution with IE8, FF and Chrome, it seems to work very well, besides, I use jQuery v1.10.1 and jsTree 1.0-rc1 (unfortunately, since the code has been there for many years, and this has this whole database and other integration solutions that I decided not to change to newer versions, it works)

hope i helped someone

Tom