JStree and ajax

Question

I am trying to update my js tree using ajax data. I want to update tree only after i get all data from ajax.Kindly help. But I am getting error as " Uncaught TypeError: $(...).jstree(...) is not a function at HTMLDocument.eval (eval at (jquery.min.js:2)" My code is as follows:-

<html>
<head>
<style>
#tree {
  margin-top: 50px;
 }
 </style>


 <script type="text/javascript" src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js'</script>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/themes/default/style.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.3/jstree.min.js">     </script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">    </script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


</head>



<strong>Click a node</strong>
 <div id="tree"></div>



 <script>


var data =[]
 var data = [
     { "id" : "root", "parent" : "#", "text" : "Root", "state":     {"opened":false} },

 ]
 var my_dictionary = {};
var flag = false;
$(document).ready(function() {
 var my_dictionary = {};
 //var DatesNew = Date1+"|"+Date2;
 //my_dictionary['Dates']  = DatesNew;
 console.log("in len of data    is...",data.length);
console.log("lennnnnnnnnnnnnnnnnof data    is...",data.length);

$.ajax({

            url: '/ajax5/',
            data1:my_dictionary,
            cache: false,
            success: function (data1) {
               //myFunction1();
                console.log("in before LOOP AJAX5...",data1);
             printData1(data1);


        } 


}).done(function(data1){
console.log("done with ajax call");
 flag = true;
 });


 });

function printData1(data1)
{
console.log("in before  printData1  is...",data1);
var lab =["1","2","3"];
var val = [42,55,51,22];
//var data = [];
for(var i=0; i<4; i++)  {

    dataTemp=[]
   dataTemp=[{ "id" : "cat1", "parent" : "root", "text" : "First Branch",     "state":{"closed":false}  } ];
//data=dataTemp;

data.push.apply(data, dataTemp);
console.log("in DTATTTTTTTTTTTTTTTTTTTT..");
console.log(data[1]); //  ["one", "two", "three", "four", "five", "six"]
//data.push({label: lab[i], value: val[i]});


 }
   console.log("in loppp....")


      console.log("in loppp21212121212....")
   console.log("in aftyer  val[i]  is...",data[1]);
} 
console.log("in befor main treee length is  val[i]  is...",data.length);
function sleep(milliseconds) {
setTimeout(function(){
console.log("THIS IS");
}, 2000);
 }
 if(flag != true){
console.log("entering in sleep");
sleep(2000);
}


jQuery(function($)
 {
  $(document).ajaxStop(function()
  {
 $('#tree')

console.log('NEWWWWWWWWWWWWWWWWW  dictionary is: ',data[1]); 

$('#tree').jstree({
'plugins': ["checkbox","json_data", "false"],

})(jQuery);






 $('#tree').on('select_node.jstree', function(event, data){
    console.log("in loppp31331331313...")

    var glue = ' > ';
    console.log("The selected nodes are:");
    console.log(data.selected);
    var path = data.instance.get_path(data.node,'.');
    console.log('Selected: ' + path); 

    //alert( $('#tree').jstree().get_path(data.node, glue, true ) );
    })

  });
 });


 </script>
 </body>
 </html>

could you narrow down the code a bit? just provide the necessary parts for the JStree. Which line creates the error? — Shtut, Feb 23 '17 at 17:02
$('#tree').jstree...is creating error..when i try to calll it in some function — ItsMeNM, Feb 23 '17 at 17:11
like function PrintData1(data) { $('#tree').jstree. 'plugins': ["checkbox","json_data", "false"], "core" : { url: '/ajax5/', //data:my_dictionary, "data" : my_dictionary, "themes": { "plugins" : [ "wholerow", "checkbox" ], "icons": true, "dots": true }, } — ItsMeNM, Feb 23 '17 at 17:11
like function PrintData1(data) { $('#tree').jstree.({ 'plugins': ["checkbox","json_data", "false"], "core" : { "data" : data, "themes": { "url": true, "icons": true, "dots": true } } } — ItsMeNM, Feb 23 '17 at 17:17
it's really hard to understand from the code you provided what's happening. could you please edit your question with a cleaner version ? — Shtut, Feb 23 '17 at 17:21
Problem statement can be :- Updating js tree using ajax data.I am getting data using my ajax url.I I want to update js tree using this data .But jstree gets updated before ajax finishes getting data.So finally my js tree is getting generated without any data.So if you can help me with some sample code which takes ajax data(dictionary/list data) and using these data js tree should get updated.e.g. I am getting data as {"Node1",SubNode1",SubNode2","Node2","SubNode3","SubNode4". So tree should get updated as Node1 ->subNode1 ->subNode2 Node2 ->subNode3 ->sbNode4 — ItsMeNM, Feb 23 '17 at 17:59

score 0 · Answer 1 · answered Feb 24 '17 at 19:08

To make sure you start building tree after you get ajax response I would do as below:

$(document).ready(function() {

  var my_dictionary = {};
  $.ajax({

    url: '/ajax5/',
    data1: my_dictionary,
    cache: false,
    success: function(data1) {
        _buildTree(); // call function that builds the tree
    }

  }).done(function(data1) {
    console.log("done with ajax call");
  });

  // function that builds the tree
  function _buildTree() {
    $('#tree')
      .jstree({
        'plugins': ["checkbox"]
      })
      .on('select_node.jstree', function(event, data) {
        var glue = ' > ';
        var path = data.instance.get_path(data.node, '.');
        console.log('Selected: ' + path);
      })
  }

});

JStree and ajax

1 Answers1

Linked