Jstree html and json
I am using JSTree to create a tree data structure that I have.
I am using Scala templates. Template files generate html. html has a SJTree div tag and also displays the first level subtree correctly, but I want to make an ajax call to further expand the tree.
Below is the code
@(course:models.CourseDetails,realtedCourses:List[models.CourseDetails])
@import helper._
@importhelper.twitterBootstrap._
@main() {
@wflash()
<div id="jstree">
<!-- in this example the tree is populated from inline HTML -->
<ul>
<li id="@{course.wnCourseName}"><font color="black">@course.wnCourseName</font>
<ul>
@for(children1 <- realtedCourses) {
<li id="@{children1.wnCourseName}"> <b><font color="blue">@children1.wnCourseName</font></b></li>
}
</ul>
</li>
</ul>
</div>
<div id="CourseData" class="tree well">
@views.html.display.displayCourseInfo(course)</div>
</div>
and JavaScript code
$('#jstree').jstree();
$('#jstree').jstree({
'core' : {
'data' : {
'url' : function (node){
if (node.id === '#')
{
return "http://localhost:9000/getCourses/" ;
}else
return "http://localhost:9000/getCourses/" + node.id;
},
'data' : function (node) {
return { 'id' : node.id };
}
}
}
});
I want to call subtree only ajax function on click event. I've seen the events section in the JSTree plugin but don't know how to make an ajax call on the server in an event and update the tree.
Server side JSON response
[
{
"data":"Science",
"attr":{
"id":"Science"
},
"state":"closed"
},
{
"data":"Commerce",
"attr":{
"id":"Commerce"
},
"state":"closed"
},
{
"data":"Arts",
"attr":{
"id":"Arts"
},
"state":"closed"
}
]
should i include an attribute parent
?
Ideally I would like to make an ajax call to the event and update the tree.
source to share
You don't have to create the tree twice. Be aware that mixing HTML and JSON data sources will be difficult. It would be better if you could create a JS variable that will hold the initial tree and then go to AJAX. You need to use core.data
as a function anyway .
If you insist on combining HTML with JSON, you will first need to keep the original HTML and then move on to AJAX, like so:
var tmp = $('#jstree').html();
$('#jstree').jstree({
"core" : {
"check_callback" : true,
"data" : function (node, cb) {
if(node.id === "#") {
cb(tmp);
}
else {
// enhance the AJAX call as needed (verb, data)
$.ajax({ url : "http://localhost:9000/getCourses/" + node.id })
.done(function (data) { cb(data) });
}
}
}
});
Here is a working demo (no AJAX of course):
http://jsfiddle.net/DGAF4/542/
source to share