jsTree not working

Question

I am new to jQuery and jsTree and I am not sure why I can't get it working? Using this tutorial: http://tkgospodinov.com/jstree-part-1-introduction/

And this html / javascript:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="">
        <title>
            BLA BLA
        </title>
        <base href="/">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <!--
        <link rel="stylesheet" href="css/styles.css">
        -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"> </script>
        <script type="text/javascript" src="jquery.jstree.js"></script>
        <script type="text/javascript">                                         
        $(document).ready(function() {
             $("#selector").jstree();
        });                                     
        </script>
        </head>
        <body>
            <div id="selector">
                <ul>
                    <li><a>Team A's Projects</a>
                        <ul>
                        <li><a>Iteration 1</a>
                            <ul>
                                <li><a>Story A</a></li>
                                <li><a>Story B</a></li>
                                <li><a>Story C</a></li>
                            </ul>
                            </li>
                        <li><a>Iteration 2</a>
                        <ul>
                            <li><a>Story D</a></li>
                              </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </body>
</html>

Nothing seems to work. I get the following error:

$("#selector").jstree is not a function

score 6 · Accepted Answer · edited Aug 18 '17 at 05:14

6

Working demo of your example: JSFiddle1 and JSFiddle2

Please check the reference and how you are calling it. This tree should be exactly the same as what you are looking for.

Rest the source of all the documentation can be found here: http://www.jstree.com/

<script type="text/javascript" src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>

Include the files mentioned below. See demo here.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>

<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">

<script type='text/javascript' src="http://static.jstree.com/v.1.0pre/jquery.jstree.js"></script>

edited Aug 18 '17 at 05:14

Tot Zam

8,406
10
51
76

answered Apr 27 '12 at 07:22

Tats_innit

33,991
10
71
77

I did as you have in the example and now I get: ncaught exception: jsTree hotkeys: jQuery hotkeys plugin not included. – AturSams Apr 27 '12 at 07:35
Hiya @ArthurWulfWhite check the answer above you were missing hotkey.js ` ` include you can copy paste the links from above. **Updated another jsfiddle from scratch with external files sorces** http://jsfiddle.net/J5ZaK/2/ let me know how it goes :) cheers! – Tats_innit Apr 27 '12 at 07:53
Thanks again Tats, this works great! how did you find the static links? – AturSams Apr 27 '12 at 08:02
No worries @ArthurWulfWhite Glad it helped, `MAGIC` lol kidding, I went to the jstree documentation did view source on one of the demo and got the sources. :) Have nice one, cheerios – Tats_innit Apr 27 '12 at 08:04

score 2 · Answer 2 · answered Apr 27 '12 at 07:16

2

It looks like your browser just isn't loading jstree.js properly?

You can try loading jstree.js from CDN (content delivery network) just like jquery is being loaded by changing the line:

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

to

<script type="text/javascript" src="http://cachedcommons.org/cache/jquery-jstree/1.0.0/javascripts/jquery-jstree-min.js"></script>

answered Apr 27 '12 at 07:16

nvuono

3,323
26
27

Yes! This seems to work but now I get a weird looking tree. :/ – AturSams Apr 27 '12 at 07:21

score 0 · Answer 3 · edited Aug 18 '17 at 05:15

0

It seems to me that your code can't access to the function jstree(). Maybe something is wrong on the path to jstree.js?

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

edited Aug 18 '17 at 05:15

Tot Zam

8,406
10
51
76

answered Apr 27 '12 at 07:16

lfergon

963
15
27

That's the weird thing, I checked that five times before posting.. the file is in the same directory as the html.. and I copy pasted the file name so it should be right. – AturSams Apr 27 '12 at 07:21

jsTree not working

3 Answers3

Linked