jstree html and json

Question

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.

Answer 1

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/