How to use jsTree in Express

Question

I have installed jsTree in my bower_components (using guidlines in this post) and my jade template looks like this -

doctype html
html
    head
        title= title
        script(src='/bower_components/jstree/dist/jstree.min.js')
        script(src='/bower_components/jquery/dist/jquery.min.js')
        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/bower_components/jstree/dist/themes/default/style.css')
        script(src='/javascripts/custom/mytree.js')
    body
        #mytreediv
            ul
                li First item
                li Second item

The script mytree.js is a script written by me where I initialize the mytreediv div element with jsTree. The script looks like this -

alert('Test1');
var myfunc = function () {
    alert('Test2');
    $('#mytreediv').jstree();
};
myfunc();

Both of the alert boxes do appear, so I am quite sure that the script is getting linked properly to HTML. But, the div element doesn't look like it is transformed to jsTree.

What am I missing here?

score 1 · Accepted Answer · answered Mar 17 '16 at 15:36

1

You have to wait for the DOM to load, otherwise jQuery won't be able to find the element:

$(document).ready(function () { 
    /* your code */ 
})

answered Mar 17 '16 at 15:36

Daniel Diekmeier

3,401
18
33

Sorry, but that did not work for me. I have the same alert boxes as the previous code; but now, even alert boxes do not appear. – Amogh Kulkarni Mar 17 '16 at 15:48
Do you even load jQuery? It's not in the code you provided. Add it above the `mytree.js` inclusion. Do you have output on your browser console? – Daniel Diekmeier Mar 17 '16 at 15:58
Yes, you were right - I was not loading jQuery. I thought it wouldn't be necessary thinking that jsTree is loading jQuery. Now that I load it in the jade, the alert boxes appear; but the problem with the jsTree still persists. – Amogh Kulkarni Mar 17 '16 at 16:08
I got the jsTree part working - the problem was the order in which I load jsTree and jQuery in jade. jQuery has to be loaded before (which, now I think is the most logical thing to do, in order to allow jsTree to use jQuery). – Amogh Kulkarni Mar 17 '16 at 16:18
I was about to suggest that! Glad to hear I could help out. – Daniel Diekmeier Mar 17 '16 at 16:23

How to use jsTree in Express

1 Answers1