Checking a checkbox node programmatically with jsTree

Question

In a tree built with jsTree, I have the text within the <a> tag sitting in a variable. I would like to check that node. How can I do so?

I am currently finding that node, using jQuery, and altering its class. However, this does not repair the parent node by making the parent undetermined in its class. I tried doing $('.colors').jstree("checkbox_repair"), but that didn't seem to do anything.

It would be great if someone could actually answer both those questions, since they are related to the same problem.

Here is a jsFiddle, illustrating the issue--> http://jsfiddle.net/thapar/5XAjU/

Solution 1

In js_tree there are .check_node ( node ) and .uncheck_node ( node ) functions, i think this is what you are asking for. Soe the documentation here: http://www.jstree.com/documentation/checkbox

This is an excerpt from the documentation in the link above, "how to perform an operation":

/* METHOD ONE */
jQuery("some-selector-to-container-node-here")
    .jstree("operation_name" [, argument_1, argument_2, ...]);

/* METHOD TWO */
jQuery.jstree._reference(needle)
    /* NEEDLE can be a DOM node or selector for the container or a node within the container */
    .operation_name([ argument_1, argument_2, ...]);

So I think this syntax should work

$.jstree._reference(".colors").check_node('li#tree_3');

Also i am not sure you should be using a class to reference your tree. Probably use an ID to reference your tree, and then use this syntax:

$.jstree._reference("#colors").check_node('li#tree_3');

//EDIT: Please keep in mind that the newest version of jsTree doesn't have a function called _reference anymore. It got renamed to reference (without the leading underscore). (Last checked 24/08/2015 15:45 by @mkli90) Link: https://www.jstree.com/api/#/?f=$.jstree.reference(needle)

Solution 2

If you want to check jsTree nodes on load for example like this:

$(document).ready(function()
{
  $.jstree._reference('#menu').check_node('#pih2');
});

it does not work. For me works following:

$(function () {
    $('#mainMenu1').bind('loaded.jstree', function(e, data){ //waiting for loading
          $.jstree._reference('#menu').check_node('#pih2');  //check node with id pih2
        $.jstree._reference('#menu').check_node('#pih6');  //check node with id pih6
  }); 
});

I use jsTree 1.0-rc3 and JQuery 1.7.1. Aloe

Solution 3

In current versions of jstree the following syntax works:

$("#my_tree").jstree("check_node", node_id);

Comments

[Ram]

put the code here: jsfiddle.net

[Raj]

I've seen that jeffery_the_wind, however, that's not very clear on usage. Can you provide an example? For example, this does not work: $('.colors').check_node('li#tree_3'), where tree_3 is a unique identifier for that node. >>>TypeError: Object [object Object] has no method 'check_node'.

[jeffery_the_wind]

@Raj ~ OK I checked the documentation and edited the answer. I suggest you take some time and thoroughly read through the documentation, I think it will benefit you a lot.

[6339]

@jeffery_the_wind how to check multiple nodes, I assume $.jstree._reference("#colors").check_node('#tree_3','#tree_4‌​');