JStree and ajax | 易学教程

问题

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>

回答1:

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);
      })
  }

});

来源：https://stackoverflow.com/questions/42421828/jstree-and-ajax

标签

jquery

ajax

django

python-3.x

jstree