Saturday, 29 December 2018

How to populate data on click on jstree last node via ajax call

i want to make jstree as shown below

enter image description here

i want to get last node data with ajax call which is File 1 and File 2

Note: i'm hardcoding last node data below to simulate ajax call

Jsfiddle: https://jsfiddle.net/vym16okw/11/

 var s = [];
            s.push(
                { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12" },
                { "id" : "ajson6", "parent" : "ajson2", "text" : "File 2", "date":"12" }
            );

here is what i have tried:

$('#using_json_2').jstree({ 'core' : {
    'data' : [
       { "id" : "ajson1", "parent" : "#", "text" : "Simple root node", "date":"2018"},
       { "id" : "ajson2", "parent" : "#", "text" : "Root node 2", "date":"2018"},
       { "id" : "ajson3", "parent" : "ajson2", "text" : "Child 1", "date":"12" },
       { "id" : "ajson4", "parent" : "ajson2", "text" : "Child 2", "date":"12" },
    ]
} });

   $('#using_json_2').on("select_node.jstree", function (e, data){
      console.log("node_id: " , data,'original',data.node.original);  
      var id = data.node.original.id;
      var date = data.node.original.date;
      $.ajax({
          url:'https://jsonplaceholder.typicode.com/users/'+id+'?date='+date,
          type:'GET',
          success:function(data){
            var s = [];
            s.push(
                { "id" : "ajson5", "parent" : "ajson2", "text" : "File 1", "date":"12" },
                { "id" : "ajson6", "parent" : "ajson2", "text" : "File 2", "date":"12" }
            );
          }
      });
        });
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>


<div id="using_json_2"></div>

Please help me thanks in advance!!!!!!!!!



from How to populate data on click on jstree last node via ajax call

No comments:

Post a Comment