CODEWITHSUNDEEP
javascriptjquerynode.js
EaBengaluru
EaBengaluru

Reputation: 71

How to get the clicked object in jstree

Wanted to get the clicked tree object value in javascript

what i'm trying to achieve is when user clicks a tree node then its related data i want to get the original object

here is what i have tried not getting object:

$('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });
    
   $("#jstree").bind(
        "select_node.jstree", function(evt, data){
            //selected node object: data.node;
            console.log('data',data.inst.get_json());
            console.log('data.node.id',data);
      });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

Expected Output:

from above snippet, when i click Child 1 or A Child 2 i should get below object

   {
      "data" : "A node",
      "metadata" : { id : 23 },
      "children" : [ "Child 1", "A Child 2" ]
   }

when user clicks on Long format demo i should get below object

 {
       "attr" : { "id" : "li.node.id1" },
       "data" : {
                   "title" : "Long format demo",
                    "attr" : { "href" : "#" }
                }
    }

Please help me thanks in advance!!!

Upvotes: 2

Views: 637

Answers (1)

Just code
Just code

Reputation: 13801

As your jstree version is old, I recommend you to update your jstree version. but, as for the 1.0v, You can use below code to get the parent node, if user clicked child one.

$('#jstree').jstree({
        "json_data" : {
            "data" : [
                {
                    "data" : "A node",
                    "metadata" : { id : 23 },
                    "children" : [ "Child 1", "A Child 2" ]
                },
                {
                    "attr" : { "id" : "li.node.id1" },
                    "data" : {
                        "title" : "Long format demo",
                        "attr" : { "href" : "#" }
                    }
                }
            ]
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    });

   $("#jstree").bind(
        "select_node.jstree", function(evt, data){

          if(data.inst._get_parent().length <= 0 || data.inst._get_parent()===-1){
            console.log('data',data.inst.get_json());
            console.log('data.node.id',data);
          }else{
             var parent = data.inst._get_parent();
              console.log(data.inst.get_json(parent));
          }
            //selected node object: data.node;

      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://old.static.jstree.com/v.1.0pre/jquery.jstree.js"></script>
<div id="jstree">
</div>

Upvotes: 2

Related Questions