CODEWITHSUNDEEP
jqueryhtmljstree
AturSams
AturSams

Reputation: 7962

jsTree not working

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

Upvotes: 3

Views: 21331

Answers (3)

lfergon
lfergon

Reputation: 973

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>

Upvotes: 0

Tats_innit
Tats_innit

Reputation: 34117

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>

Upvotes: 6

nvuono
nvuono

Reputation: 3363

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>

Upvotes: 2

Related Questions