12

I am totally new to jQuery and jstree. I am using jstree and populating the data using xml. But would like to capture event for each node whether checked or not along with their Ids. I tried using jstree's plugins API like change_state(),check_node() or select_node() but it's not working. Also I would like to get all selected nodes data in an array for further processing..Can anyone help?

Thanks...

FelipeAls
  • 21,711
  • 8
  • 54
  • 74
user529011
  • 161
  • 2
  • 2
  • 7
  • which jstree plugin you are using? – Vivek Jan 28 '11 at 12:13
  • @Vivek probably jquery.jstree. @user529011 Can you give an example of the code your using. Maybe isolate your issue on http://www.jsfiddle.net – Raynos Jan 28 '11 at 12:28
  • function checked_unchecked(){ $.jstree._reference("#demo").get_selected(); } this gives me the object but no ids for the checked items. Also tried to bind check_node and select_node as .jstree().bind("check_node.jstree",function(data){ alert(data); }) but no result – user529011 Jan 28 '11 at 12:52

2 Answers2

22

I like the jstree plugin but it's not well documented, nor is it built to conform to say, jquery ui standards of plugin development. I have used 1.0rc2 to accomplish what you're trying to do.

You have to bind the "loaded" event before you instantiate the jstree so I'm guessing it's the same with the "change_state" event. The other thing to watch out for is that "change_state" is more than just a change due to a check box. For instance it will also fire when you expand a node (but not collapse, for some reason). That said, I do some kludgey checking in the "change_state" handler to try and filter out unwanted events from the checkbox change. The minimum code for tapping the handler is 

$("#treeElement").bind("change_state.jstree", function (e, d) {
    var tagName = d.args[0].tagName;
    var refreshing = d.inst.data.core.refreshing;
    if ((tagName == "A" || tagName == "INS") &&
      (refreshing != true && refreshing != "undefined")) {
    //if a checkbox or it's text was clicked, 
    //and this is not due to a refresh or initial load, run this code . . .
    }
});

Your clicked element is then d.rslt and you can get checked items with d.inst.get_checked() for just the element clicked, or d.inst.get_checked(d.rslt) for an object containing the sub nodes that are checked. Use jquery's .each function to process the nodes.

Tomasz Nurkiewicz
  • 334,321
  • 69
  • 703
  • 674
Toadmyster
  • 490
  • 3
  • 10
  • What is the point in writing a checkbox plugin for a data tree without an obvious events API?! Seems like a bit of an oversight! – rgvcorley Jul 18 '12 at 16:36
  • 1
    I take that back - `check_node.jstree` and `uncheck_node.jstree` events are triggered, it just isn't in the documentation for jstree. – rgvcorley Jul 18 '12 at 16:46
  • How to get the attributes of only clicked element (i.e d.rslt) ? @Toadmyster – Shibankar Jan 08 '15 at 11:36
3

The current version of jstree seems to have a problem with the check_node.jstree binding. Also the select_node.jstree binding does not fire with checkbox plugin active with the current release.

Head over to HERE where you can ask the creator questions or even view questions already asked.

As for $.jstree._reference("#demo").get_selected(); you can get the ID of each item by using $.jstree._reference("#demo").get_selected().each(function(index,element){alert($(element).attr("id"));});

Bob
  • 3,074
  • 11
  • 43
  • 62