Question

I am trying to add in jsTree to my webapp. When I trigger the click event that creates the jsTree, nothing appears. If I examine the HTML in Chromium developer tools, all that it has rendered is an empty unordered list tag. Does anyone know what I’m doing wrong?

Html before:

<div id="studenttree">
</div>

Jquery/Jstree code:

$('#studenttree').jstree({
    'plugins' : ['json_data'],
    'json_data' : {
        'ajax' : {
            'url' : 'fakejax/getdirs.txt',
            'data' : function(n) {
                return {'id' : 'test'};
            }
        }
    }
});

Html after event trigger:

<div id="studenttree" class="jstree jstree-0 jstree-focused">
  <ul></ul>
</div>

fakejax/getdirs.txt:

[
  {
    "data" : "test",
    "children" : ["Child 1", "Child 2"]
  }
]

In the Chromium developer tools, no ajax request to getdirs.txt appears, so I’m assuming that the request isn’t even being made. The block of code is being executed however, as surrounding console.log() statements are appearing in the output box. I feel like I’m missing something simple.

Answer 1

After testing my code, using the jquery.jstree.js file included from another source, I discovered the code worked. Upon further investigation, it was clear my local jquery.jstree.js file had been corrupted during download and was failing to properly render.