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.