Question

Is there a way to update selected checkbox with ajax request in jsTree?

I cant find any ideas how to do this, how to call an event or calback function on checkbox click or unclick.

Also I cant find any ideas how to update checkbox tree with selected values on page load.

Thanks for your answers 🙂

Answer 1

To populate the checkbox when loading from a data source with JSON_DATA, either with or without ajax, just add "class": "jstree-checked" to the "attr" object for that node. This will be added to the <li> element when the data is loaded and cause the box to be checked.

To capture the event on checkbox check/uncheck, just bind to the “check_node” or “uncheck_node” event, e.g.

$("#mytree").jstree(...).bind('check_node.jstree', function(e, data) {
    alert('box checked');
}

If you are using version 1.0rc2 which is on the jstree web site, I would download a more recent development version from the project page: http://code.google.com/p/jstree/source/list

I have been tinkering with jstree a lot in the last few days (trying to figure out many of these same issues) and the “check_node” event definitely does not work in 1.0rc2.

There also seemed to be some strange issues with the “jstree-checked” class when combined with the “cookies” plug-in as well, further complicated by different behavior depending on whether the cookies plugin was added before or after the checkbox plugin. Everything seems to work fine in the most recent development version, though.