9

I am trying to get the selected Node from a jstree.

This is the code in the View 

<div id="divtree" >
    <ul id="tree" >
         @foreach (var m in Model.presidentList)
         {
             <li class="jstree-clicked">
                  <a href="#" class="usr">@m.Name</a>
                  @Html.Partial("Childrens", m)
              </li>
         }
     </ul>
</div>

This is the javascript part where I try to retrieve the name of the Node

$(".jstree-clicked").click(function (e) {
        var node = $(this).jstree('get_selected').text();
        alert(node);
});

I have a problem on getting only the selected node. If I select one of the children(last node of the tree for example) I still get the entire list of nodes. Please let me know if you have any idea where I am doing something wrong?

VahidNaderi
  • 2,448
  • 1
  • 23
  • 35
Cristian
  • 187
  • 2
  • 3
  • 7
  • According to jstree demo [here](http://www.jstree.com/demo) I don't see any similarities to your code for getting the clicked node or even setting up the tree. – VahidNaderi Nov 18 '13 at 17:36

5 Answers5

17

I don't think you should assign class 'jstree-clicked' for each <li> node. And get selected node using jstree container that you used for jstree binding.

console.log($("#divtree").jstree("get_selected").text());
Murali Mopuru
  • 6,086
  • 5
  • 33
  • 51
  • Not working for me.. $(treeContainerId).jstree("get_selected"); ["22~58", "22~59"] $(treeContainerId).jstree("get_selected").text(); TypeError: undefined is not a function – Vaibhav May 09 '14 at 06:10
  • You are allowing JSTree to selected multiple items it seems. Try using $(treeContainerId).jstree("get_selected")[0].text() or $(treeContainerId).jstree("get_selected")[1].text() – Murali Mopuru May 09 '14 at 10:45
  • 3
    none of these work for me (: I wish there were a clear concise way to get a selected node. – sarsnake May 09 '14 at 21:37
  • It is not at all working. it is showing error as Uncaught TypeError: $(...).jstree(...).text is not a function – Nithin Paul Feb 03 '16 at 13:02
  • It will work if you add jstree and jquery files into your html and initialize jstree well. – Murali Mopuru Feb 03 '16 at 14:05
  • @Murali Mopuru Ok can you tell me whats wrong with the code in this link http://stackoverflow.com/questions/35170283/how-to-get-selected-nodes-text-in-jstree – Nithin Paul Feb 04 '16 at 05:32
  • 7
    Thnx a lot, the api documentation is not clear at all on this subject. For someone else looking for it: $("#divtree").jstree("get_selected",true) will return the complete object – Maarten Kieft Mar 17 '16 at 07:40
  • @MaartenKieft thanks! This should be a separate answer! Without 'true' it does not work for me. – jumps4fun Feb 27 '17 at 14:07
  • 1
    @KjetilNordin: You're welcome. I converted it to answer :) I don't always check the comments either. – Maarten Kieft Feb 27 '17 at 18:02
13

var data = $(yourtree).jstree().get_selected(true)[0].text;

console.log(data);

This works for me. Give it a shot!

Evan Lalo
  • 1,209
  • 1
  • 14
  • 34
7

Since more people found my comment useful I converted it to an answer. Thanks to the answer Murali, I was able to resolve my issue. This code:

$("#divtree").jstree("get_selected",true)

will return the complete object. (Look at the true parameter)

Maarten Kieft
  • 6,806
  • 3
  • 29
  • 34
3

Try this:

var CurrentNode = $("#divtree").jstree("get_selected");
console.log($('#'+CurrentNode).text());
Amirhossein Mehrvarzi
  • 18,024
  • 7
  • 45
  • 70
user3608059
  • 41
  • 2
  • 1) This is wrong. No ** element exists. 2) This looks like a poor copy and slight tweak of the accepted answer. – Uyghur Lives Matter Mar 10 '15 at 17:15
  • 1
    Sorry, I have forgot "#" – user3608059 Mar 11 '15 at 10:03
  • You can also try this one -> $('#jstree').on('changed.jstree', function (e, data) { var i, j, r = []; for (i = 0, j = data.selected.length; i < j; i++) { r.push(data.instance.get_node(data.selected[i]).text); } $('#resultText').html('Selected: ' + r.join(', ')); }).jstree(); – Nithin Paul Feb 04 '16 at 08:42
0

Here is how I create a new node in his 'selected' parent:

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <button class="btn btn-secondary" id="add_node">
            Add directory    
        </button>
    </div>
    <input type="text" class="form-control" placeholder="Dir name" id="node_text">
</div>

And my Javascript :

    htmlSource.jstree();

    $('#add_node').on('click', function () {
        let text = $(this).closest('.input-group').find('#node_text').val();
        let selected = htmlSource.jstree('get_selected');
        htmlSource.jstree().create_node(selected, {
            "text": text
        },
        "last",
        function (e) {
            console.log(e);
        });
    })

I hope it can be useful or give someone a lead

arno
  • 792
  • 14
  • 33