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

Question

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

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

Answer 1

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.

Answer 2

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

Answer 3

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

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

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

With the latest version of jsTree, you can do it as follows:

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

Answer 10

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

Answer 11

Just use

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

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

Answer 12

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

Answer 13

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.

Answer 14

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