jstree html and json

I am using JSTree to create a tree structure of the data I have.



I am using Scala templates. The templates files create the html. the html has a SJTree div tag and also displays the first level subtree correctly, but I want to make an ajax call to expand the tree further.



Below is the code I have



@(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 the JavaScript code is



$('#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 the ajax function only for the subtree on click event. I saw the events section in the JSTree plugin, but not sure how to make an ajax call to the server on 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 the parent attribute as well?



Ideally, I would like to make an ajax call on event and update the tree.



Answers

You should not create the tree twice. Keep in mind mixing HTML and JSON data sources will be complicated to achieve. It would be better if you could create a JS variable, which will hold the initial tree, and then move to AJAX. In any case, you need to use core.data as a function.



If you insist on combining HTML with JSON, you will have to first store the original HTML, and then proceed to AJAX, like this:



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 (without the AJAX of course):

http://jsfiddle.net/DGAF4/542/