jstree select node

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,开发者_StackOverflow TREE_OBJ) {
                    alert(NODE.id);
                }
            },
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    });
});

and i get empty alertt

Or just bind the select node:

$("#industries").tree({
        callback: {
            onselect: function(NODE, TREE_OBJ) {
                    alert(NODE.id);
                }
            },
        data: {
            type: "json",
            opts: {
                url: "/Admin/GetIndustries/"
            }
        }
    })
.bind("select_node.jstree", function (NODE, REF_NODE) {
            var a = $.jstree._focused().get_selected();
        }
    });

Try looking at the variable a for the ID, or NODE. I was actually using REF_NODE to get

I did not check all the answers but saw that you didnt select any so decided to post a method that worked for me

 $(function () {
        $("#demo1")
        .bind("select_node.jstree", function (event, data) {
                           var selectedObj = data.rslt.obj;
            alert(selectedObj.attr("id") + selectedObj.attr("data"));
             })

this is if you want the id and the title of the node. hope this helps

You can use it in your bind() function like this:

.bind("check_node.jstree", function(e, data) {
    //console.log(data.rslt.obj.attr(\'id\'));

    if (data.rslt.obj !== undefined && data.rslt.obj.attr(\'id\') !== undefined) {
        jQuery.ajax({
            async: false,
            type: "POST",
            dataType: "json",
            url: "' . Yii::app()->createUrl('adsmanager/adsfields/ajaxappendcategory') . '",
            data: {
                "id" : data.rslt.obj.attr(\'id\'),
                "itemId" : "' . Yii::app()->getRequest()->getParam('id') . '",
            },
            success: function(r) {
                if(r === undefined || r.status === undefined || !r.status) {
                    data.rslt.obj.removeClass(\'jstree-checked\');
                    data.rslt.obj.addClass(\'jstree-unchecked\');
                } else {
                    niceBox(\'ok, checked\');
                }
            }
        });
    }

    return true;
});

The same with uncheck action.

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

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

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>

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

$('#jstree-api').on('changed.jstree', function (e, data) {
    var objNode = data.instance.get_node(data.selected);
    var note;
    note = 'Selected Node Data(Id: <strong>' + objNode.id + '</strong>, Name: <strong>' + objNode.text + '</strong>)'; e = 'Selected Category(Id: <strong>' + objNode.id + '</strong>, Name: <strong id="api-data" data-parent="' + objNode.parent + '" data-id="' + objNode.id + '">' + objNode.text + '</strong>)';

    $('#footer-api').html(note);
});

This will get you the selected node details.

Here is a series of article you should follow if you are using jsTree.