.jstree() or .tree(), and how to get it to work

Question

Silly question. A lot of examples using jstree that I find on the web use the syntax $('#someTreeId').tree(), whereas the demo on the jstree website keeps referring to the syntax $('#someTreeId').jstree().

When I use .jstree() I get a browser error saying this is not a function. But when I use .tree I barely get any farther: it only gets to 'Loading...'.

So far I haven't included any options at all inside the function brackets. I was assuming jstree would produce a basic tree if I included the UL in the HTML. But it doesn't.

Answer 1

I found actually this line cause the problem

@Scripts.Render("~/bundles/jquery") 

in _layout

Answer 2

May be use this trick to find the exact function names of jstree plugin.

Open jquery.jstree.js, check for the keyword "$.fn.* =" or "jQuery.fn.* = " or "jQuery.* =" or "$.*="

The '*' will be the function names.

Not to complicate, in jstree plugin the function name is jstree(). The error not a function is because, the plugin is not loaded. Check if the script path to jstree.js is correct.

Answer 3

I would always go with the documentation from the plugin's website rather than a third-party. The third-party documentation may not be up to date whereas the plugin's website really should be.

I haven't come across the issue with jstree throwing a "This is not a function" error. If the call to jstree fails then your markup won't be styled as a tree so that explains why a basic tree isn't produced.

As for why the error comes up, the first thing I would check is that all the necessary JavaScript libraries are referenced and in the correct order. For example, something like the following should be in your page's tag (adjust the paths as required):

<script type="text/javascript" src="js/_lib/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jstree.js"></script>