<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script type="text/javascript"">
alert($().jquery);
alert($().jstree._themes);
$(function () {
$("#tree").jstree({
"json_data" : {
"ajax" : {
"url" : "/home/antonio/tomcat/webapps/jstree/_docs/_json_data.json",
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
},
"plugins" : [ "themes", "json_data" ]
});
});
</script>
</head>
<body>
<h> Hello </h>
<div id='tree'></div>
</body>
</html>
Okey, the main problem is that the sample code is not working. When i try to display this page the animation of loading the tree appears but it hangs forever and it does not show anything.
The version of the jquery appears correctly. And the next alert as well.
What i'm doing wrong?
Please use a proper editor (and look in the browser console..). I pasted your code in Netbeans (I use it for Java too) and it already showed me these typo's:
<script type="text/javascript"">
The double quote.
<h> Hello </h>
The invalid h tag.
Should be like
<script type="text/javascript">
<h1> Hello </h1>
Further, you would want to add the CSS, right..
I found some jquery.jstree.js, but it gives me an error just without any clientcode. Please provide the source of your example by either an url or a jsfiddle example.
This is the solution i found to my problem.
<html>
<head>
<title>Demo</title>
<script type="text/javascript" src="../_lib/jquery.js"></script>
<script type="text/javascript" src="../_lib/jquery.cookie.js"></script>
<script type="text/javascript" src="../_lib/jquery.hotkeys.js"></script>
<script type="text/javascript" src="../jquery.jstree.js"></script>
<script type="text/javascript">
alert($().jquery);
alert($().jstree._themes);
$(function () {
$("#tree").jstree({
"json_data" : {
"ajax" : {
"url" : function (node) {
if (node == -1)
{
url = loadRoot();
}
else {
url = loadNode(node);
}
return url;
},
"data" : function (n) {
return { id : n.attr ? n.attr("id") : 0 };
}
}
},
"plugins" : [ "themes", "json_data" ]
});
});
function loadRoot() {
return "http://localhost:7777/jstree/_docs/_json_data_123.json";
}
function loadNode(node) {
var nodeId = "";
var url = "";
nodeId = node.attr('id');
//Call the function that will retrieve the information.
// fetchData();
url = "http://localhost:7777/jstree/_docs/_json_data_0"+nodeId+".json";
return url;
}
</script>
</head>
<body>
<h1> Hello </h1>
<div id='tree'></div>
</body>
</html>