JStree 和 ajax答案

【问题标题】：JStree and ajaxJStree 和 ajax
【发布时间】：2017-07-14 07:02:11
【问题描述】：

我正在尝试使用 ajax 数据更新我的 js 树。我只想在从 ajax 获取所有数据后更新树。请帮助。但我收到错误 " 未捕获的 TypeError: $(...).jstree(...) 不是函数在 HTMLDocument.eval （评估在（jquery.min.js:2）” 我的代码如下：-

<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>

【问题讨论】：

你能把代码缩小一点吗？只需为 JStree 提供必要的部分。哪一行产生了错误？
$('#tree').jstree...正在创建错误..当我尝试在某些函数中调用它时
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 }, }
like function PrintData1(data) { $('#tree').jstree.({ 'plugins': ["checkbox","json_data", "false"], "core" : { “数据”：数据，“主题”：{ “url”：真，“图标”：真，“点”：真 } } }
从您提供的代码中很难理解发生了什么。你能用更干净的版本编辑你的问题吗？

标签： jquery ajax django python-3.x jstree

【解决方案1】：

为了确保您在收到 ajax 响应后开始构建树，我将执行以下操作：

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

});

【讨论】：