Fancytree - Init from Ajax request

This sample includes all options (with their default values) to allow playing with them.

by bizamajig

HTML

<link rel="stylesheet" href="https://rawgithub.com/mar10/fancytree/master/src/skin-win8/ui.fancytree.css">
<script src="https://rawgithub.com/mar10/fancytree/master/src/jquery.fancytree.js"></script>
<div id="tree"></div>
<div id="statusLine">-</div>
<button id="button1">Toggle item2</button>

JavaScript

/*
This test data is only used to mock-up the Ajax reuqest with jsFiddle's echo feature.
A real handler would return the equivalent JSON.
*/
var AJAX_RESPONSE = [
    {title: "node 1", key: "id1"},
    {title: "node 2", key: "id2"}
];
var FAKE_REQUEST = {
    url: "/echo/json/",
    type: "POST",
    data: {
        json: JSON.stringify(AJAX_RESPONSE),
        delay: 1
    }
};
/*
End of mock-up code
*/

$(function(){
    // Initialize the tree from the <ul> tag inside <div id='tree'>
    $("#tree").fancytree({
        source: $.ajax(FAKE_REQUEST),
        checkbox: true,
        activate: function(e, data){
            $("div#statusLine").text("Active node: " + data.node);
        }
    });
    
    // Activate a node, on button click
    $("button#button1").click(function(){
        var tree = $("#tree").fancytree("getTree"),
            node2 = tree.getNodeByKey("id2");
        node2.toggleSelected();
    });
});