I've been trying to get the text of a node that is selected in a jsTree. I am able to populate the tree and trigger the onSelect event, but I can't find out which node was clicked. I've seen examples on the net that use data.rslt.obj.attr("data")
to fetch the text, however this is returning undefined for me. Additionally, when I try to get the selected node using .jstree('get_selected')
I can't find the node text anywhere in the object. How can I get the node text?
Here is my onSelect callback function:
function onSelect(event, data)
{
// Get the name of the equipment that was selected.
var selected_node = $("#equipment_tree").jstree('get_selected');
var equipment_name = data.rslt.obj.attr("data");
}
Update in 2018.
Thanks to @ProfK's comment, the API has changed in new version of jstree. In jstree v3.1.0 (or earlier), the API has changed to:
$("#treeContainer").on(
"select_node.jstree", function(evt, data){
//selected node object: data.node;
}
);
For jstree old version (before 2013).
You can get the selected node object and its text by:
$("#treeContainer").bind(
"select_node.jstree", function(evt, data){
//selected node object: data.inst.get_json()[0];
//selected node text: data.inst.get_json()[0].data
}
);
jstree new version for get text from node should use data.node.text
$("#treeContainer").on("select_node.jstree",
function(evt, data){
alert(data.node.text);
}
);
$("#equipment_tree").bind("select_node.jstree", function(evt, data){
var i, j, r = [], ids=[];
for(i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text);
}
alert('Selected: ' + r.join(', '));
}
);
you have to try this.
With the current version it's best to use get_selected
with full: true
, which means that the method will return the full object(s), and not only id.
So for example:
$("#treeNode").jstree('get_selected', true);
or:
$("#treeNode").jstree().get_selected(true);
Each element in the array will have all the properties as text or id.
The click event doesn't pass any data with it, so the event object will need to be used.
.bind("click.jstree", function (event) {
alert($(event.currentTarget).parent("li:first").text().trim());
});