我正在尝试使用Ajax数据更新js树，并且我只想在从ajax获得所有数据后才更新树。但是我得到了如下报错：" Uncaught TypeError: $(...).jstree(...) is not a function at HTMLDocument.eval (eval at (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>
