jQuery Fancy Tree with Local Array Data

javascript, jquery, jquery-plugins, jquery-ui, treeview

Solution

I have noticed that `source:[]` is how you initializes the tree in `$("#tabTree").fancytree()` initialization call, so your example would be:

<html>
<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="jquery-ui.custom.js" type="text/javascript"></script>
    <link href="ui.fancytree.css" rel="stylesheet" type="text/css" />
    <script src="jquery.fancytree.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#tree").fancytree({
                onActivate: function (node) {
                    // A DynaTreeNode object is passed to the activation handler

                    // Note: we also get this event, if persistence is on, and the 
                     //  age is reloaded.
                    alert("You activated " + node.data.title);
                },
                source: [ // Pass an array of nodes.
                {title: "Item 1" },
                { title: "Folder 2", isFolder: true,
                    children: [
                        { title: "Sub-item 2.1" },
                        { title: "Sub-item 2.2" }
                    ]
                },
                { title: "Item 3" }
            ]
            });
        });

    </script>
</head>
<body>
    <div id="tree">
    </div>
</body>
</html>

btw, in case you noticed it, the documentation is quite messy, as they are refactoring the code, the documentation is half what's left from dynatree and the new conventions of fancytree. So expect more weird stuff like that :-)

Problem

I am trying to implement jQuery FancyTree http://wwwendt.de/tech/fancytree/demo/ with local array data Referred from https://code.google.com/p/fancytree/ This is the code. But it is not working, No Script Error.But Tree is empty!!! Even i copied the jQuery, UI versions of the file they using in a demo site. Still nothing works ``` <html> <head> <script src="jquery.js" type="text/javascript"></script> <script src="jquery-ui.custom.js" type="text/javascript"></script> <link href="ui.fancytree.css" rel="stylesheet" type="text/css" /> <script src="jquery.fancytree.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#tree").fancytree({ onActivate: function (node) { // A DynaTreeNode object is passed to the activation handler // Note: we also get this event, if persistence is on, and the // age is reloaded. alert("You activated " + node.data.title); }, children: [ // Pass an array of nodes. {title: "Item 1" }, { title: "Folder 2", isFolder: true, children: [ { title: "Sub-item 2.1" }, { title: "Sub-item 2.2" } ] }, { title: "Item 3" } ] }); }); </script> </head> <body> <div id="tree"> </div> </body> </html> ```

Original source