Passing data from MVC controller to jsTree through ajax calls.

Question

I have a jsTree with a parent node and 5 children nodes. They function fine. I am trying to implement a dynamic jsTree where with click of a node, an ajax call should pass that node's ID to my java MVC spring-boot controller and a Map with keys as child nodes' IDs and value as names of child nodes.

So far I have managed to get the value of the clicked child node's ID and pass it to my java controller through ajax call. But I'm not able to proceed further as I am not sure how to structure the data that is passed from controller to ajax call which in turn has to implement the jsTree. Here's the code of my existing jsTree -

<div id="container">
 <ul>
   <li id = "id1">Root
      <ul>
        <li id="id 1-1">child 1</li>
        <li id="id 1-2">child 2</li>
        <li id="id 1-3">child 3</li>
        <li id="id 1-4">child 4</li>
        <li id="id 1-5">child 5</li>       
      </ul>
   </li>
 </ul>
</div>

Here's the code of my ajax -jquery call that passes the nodeID to the controller-

$(function() {
  $('#container').on('changed.jstree', function (e, data) {
    var i, j, r = [], rid = [];
    for(i = 0, j = data.selected.length; i < j; i++) {
      r.push(data.instance.get_node(data.selected[i]).text);
      rid.push(data.instance.get_node(data.selected[i]).id);
    }
    console.clear();
    console.log('Selected: ' + r.join(', '));
    console.log('Selected id: ' + rid.join(', '));
    $.ajax({
        type: 'GET',
        url: "http://localhost:8080/tree/object?nodeID="+rid.join(', '),
        contentType: 'text/plain',
        crossDomain: false,
        async:true,
        success:function() {

            }   
    });
  })
  .jstree();
});

I'm limited by my knowledge of jsTree, ajax and jquery. Any help would be appreciated. I am looking into the documentation of jsTree: filling the tree through ajax calls here .

Answer 1

You don't want to do your own AJAX call - You can set a URL to use as per: https://www.jstree.com/api/#/?f= $.jstree.defaults.core.data and JSTree will perform the Ajax calls for you.

set the url property to your url, and data to a function that returns the node id;

'url' : 'ajax_nodes.html',
'data' : function (node) {
    return { 'id' : node.id };
}

If returning the data from an Ajax call - you should probably return it in JSON instead, not in HTML.

So this page is what you should be looking at: https://www.jstree.com/docs/json/

The minimum you need is a JSON object like so;

{
  id          : "string" // will be autogenerated if omitted
  text        : "string" 
  children    : false
}

Where Children should be true if that node can expand and trigger another all with itself as the ID passed to get its children and false if it is a leaf node.