jsTree - loading subnodes via ajax on demand

Question

I\'m trying to get a jsTree working with on demand loading of subnodes. My code is this:

jQuery(\'#introspection_tree\').jstree({ 
        \"json_data\" : {
              


        

Answer 1

I spended hours on this problem. Finally i got it that way:

$("#resourceTree").jstree({
    "types": {
      "default": {
        "icon": "fa fa-folder-open treeFolderIcon",
      }
    },
    "plugins": ["json_data", "types", "wholerow", "search"],
    "core": {
      "multiple": false,
      "data": {
        "url" : function(node){
          var url = "rootTree.json";
          if(node.id === "specialChildSubTree")
            url = "specialChildSubTree.json";
          return url;
        },
        "data" : function(node){
          return {"id" : node.id};
        }
      }
    },
  });

rootTree.json:

[
  {
    "text": "Opened root folder",
    "state": {
      "opened": true
    },
    "children": [
      {
        "id" : "specialChildSubTree",
        "state": "closed",
        "children":true
      }
    ]
  }
]

specialChildSubTree.json:

[
  "Child 1",
  {
    "text": "Child 2",
    "children": [
      "One more"
    ]
  }
]

So i mark the node that become the parent of the ajax loaded subtree with an id, i watch for in the core configuration.

NOTE: That node must have the "state" : "closed" parameter and it must have the parameter "children" : true.

I am using jsTree.js in version 3.3.3