How do I get the id of the selected node in jsTree?

How can I get the id of the selected node in a jsTree?

function createNewNode() {
  alert('test');
  var tree = $.tree.reference("#basic_h开发者_StackOverflowtml");
  selectedNodeId = xxxxxxxxx; //insert instruction to get id here
  tree.create({ data : "New Node Name" }, selectedNodeId);
}

Unable to get harpo's solution to work, and unwilling to use Olivier's solution as it uses internal jsTree functions, I came up with a different approach.

$('#tree').jstree('get_selected').attr('id')

It's that simple. The get_selected function returns an array of selected list items. If you do .attr on that array, jQuery will look at the first item in the list. If you need IDs of multiple selections, then treat it as an array instead.

Nodes in jsTree are essentially wrapped list items. This will get you a reference to the first one.

var n = $.tree.focused().get_node('li:eq(0)')

You can replace $.tree.focused() if you have a reference to the tree.

To get the id, take the first matched element

if (n.length)
    id = n[0].id

or you can use the jQuery attr function, which works on the first element in the set

id = n.attr('id');

In jstree version 3.1.1, you can get it directly from get_selected:

$("#<your tree container's id>").jstree("get_selected")

In the most recent version of jsTree (checked at 3.3.3), you can do this to get an array of IDs:

var ids = $('#tree').jstree('get_selected');

This will return, for example, ["selected_id1", "selected_id2", "selected_id3"]. If you want to get the selected nodes (not IDs), you can do this:

var nodes = $('#tree').jstree('get_selected', true);

The current docs contain more information.

  $.jstree._reference('#my_tree_container')._get_node(null, true).each(function() {
    id = $(this).attr("id");
    alert('Id selected: ' + id);        
  });

I was having problems getting the selected ids from a tree with MULTIPLE selections. This is the way I got them:

var checked_ids = [];
$("#your-tree-id").jstree('get_selected').each(function(){    
      checked_ids.push($(this).data('id'));                         
});

In my case, the data call doesnt work. I succeed in accessing my node data by using attr function.

$("#tree").jstree("get_selected").attr("my-data-name");

to get all selected ids use the below code

var selectedData = [];
var selectedIndexes;
 selectedIndexes = $("#jstree").jstree("get_selected", true);
jQuery.each(selectedIndexes, function (index, value) {
     selectedData.push(selectedIndexes[index].id);
 });

now you have all the selected id's in the "selectedData" variable

With latest version of Jstree; you can do it as following:

<script type="text/javascript>
    var checked_ids = [];
    $('#your-tree-id).jstree("get_checked",null,true).each(function(){
        checked_ids.push(this.id);
    });
    alert(checked_ids.join(","));
</script>

<script type="text/javascript>
    checked_ids.push($(this).context.id);
</script>

Just use

var nodeId = $('#FaqTreeView').jstree().get_selected("id")[0].id;

where #FaqTreeView is the id of your div that contains the jstree.

In some cases and/or jstree versions this solution doesn't work.

$('#tree').jstree('get_selected').attr('id');

Instead of defined "id" I get nothing. What did the trick for me is:

$("#tree").jstree("get_selected").toString();

These are all old answers for old versions. As of version 3.3.3 this will work to get all attributes of the selected node.

$('#jstree').jstree().get_selected(true)[0]

If you then want the id then add .id at the end. You can look at all the other attributes in web developer tools if you copy the above code.

You can use the following code var nodes = $("#jstree_demo_div").jstree(true).get_selected("full", true);//List of selected node

nodes[0].id//Which will give id of 1st object from array