Search code examples
jqueryhtmljstree

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

Solution

  • 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>