jstree select node

Question

Greetings, I am using jsTree to generatate my hierarchical data. JsTree is generated as follows:

$(function() {
$("#industries").tree({
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    });
});

it works find and the jsonresult is something like:

[{"attributes":[],"data":{"title":"Adwokaci, Notariusze","id":"1a051101-c3fa-48f2-b2e1-c60d1b67ea22"},"children":[{"attributes":[],"data":{"title":"Kancelarie adwokackie","id":"26d6cff1-3c7f-4a2f-bf5a-422e08127b43"

my question is: how can I save id of selected node in some hidden field? I do something like this:

<script type="text/javascript">
    $("#industries").click(function() {
        var tree = $.tree.reference("industries");
        var t = $.tree.focused(); if (t.selected) t.selected; else alert("Select a node first");
        alert(t.id);

    });

but it does not work. I get in my alert window "undefined". Can someone please help me?

EDIT: I've changed the jstree instance as follows:

$(function() {
$("#industries").tree({
        callback: {
            onselect: function(NODE, TREE_OBJ) {
                    alert(NODE.id);
                }
            },
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    });
});

and i get empty alertt

Answer 1

Try the callbacks mentioned here: http://www.jstree.com/documentation

It should work something like this:

$("#industries").tree({
    //..... your other stuff .....
    callback: {
        onselect: function(NODE, TREE_OBJ) {
                      node_id = NODE.id;
                  }
    }
});

Answer 2

Now that you've changed your code to use the onselect callback, are you still having problems? I can't tell if your edit means you've solved the problem or not. If you have, you should mark this question as answered.

Personally, I use onchange instead of onselect, but I'm sure either would work. You could also consider using jquery's data() features to store values along with an element on the page instead of a hidden field, unless you are wanting submit a form with the value.

But if you need to save it to a hidden field, try something like this:

$("#industries").tree({
    //..... your other stuff .....
    callback: {
        onchange: function(NODE, TREE_OBJ) {
             $("#hidden_field").val(NODE.id);
        }
    }
});

Answer 3

Are the ids being assigned to any of the HTML objects at the moment?

In my solution I set the id on the attribute of the item, not in the data, which sets the ids on each <li>. Like so:

[{"data":"Origination","attributes":{"id":"10"}",children":[
                     {"data":"New Connection","attributes":{"id":"11"}},
                     {"data":"Disconnection","attributes":{"id":"12"}},
                     {"data":"Load Change","attributes":{"id":"13"}},
                     {"data":"Corporate","attributes":{"id":"14"}}
                     ]}]

and that has the effect of rendering this HTML (I am also using the jsTree checkbox plugin):

<UL class=ltr sizcache="2" sizset="4">
  <LI id=10 class="  open" selected="false"><A class=undetermined href=""><INS>&nbsp;</INS>Origination</A>
  <UL sizcache="2" sizset="0">
    <LI id=11 class=leaf selected="false"><A href=""><INS>&nbsp;</INS>New Connection</A></LI>
    <LI id=12 class=leaf selected="true"><A class=checked href=""><INS>&nbsp;</INS>Disconnection</A></LI>
    <LI id=13 class=leaf selected="false"><A href=""><INS>&nbsp;</INS>Load Change</A></LI>
    <LI style="MARGIN-TOP: 0px" id=14 class="last leaf" selected="true"><A class=checked href=""><INS>&nbsp;</INS>Corporate</A></LI>

Answer 4

Like Matt, I also put the id in an attributes object, so it gets attached to the li node (example copied from Matt).

{"data":"Origination",
 "attributes":{"id":"10"},
 "children":[
   { "data":"New Connection",
     "attributes":{"id":"11"}
   },
   { "data":"Disconnection",
     "attributes":{"id":"12"}
   }
 ]
}

Then, in my onselect function, I first wrap the li node in jQuery (the function parameter is not wrapped), then get it's id.

    treeObject.callback = {
        onselect: function(liNode, oTree) {
            var id = $(liNode).attr('id');
            var script = ComParentSet.getScript(id);
            script.doXYZ();
        }
    }