JStree和Ajax [英] JStree and ajax
本文介绍了JStree和Ajax的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用ajax数据更新我的js树. 我只想在从ajax获取所有数据后更新树.请帮助. 但是我得到了错误 未捕获的TypeError:$(...).jstree(...)不是函数 在HTMLDocument.eval(在(jquery.min.js:2)处评估" 我的代码如下:-
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>
推荐答案
为确保您在收到Ajax响应后开始构建树，我将执行以下操作:
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和Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
