Question

The current web page displays a static jstree. The script (displayed below) was in the same file as the JSP page, using data that was added to the spring model.

Setup#1

<div id="permissions" class="scroll"></div>
<script type="text/javascript" class="source">
    $(function () {
        $("#permissions").jstree({ 
            "plugins" : [ "themes", "json_data", "checkbox", "sort", "ui" ],
            "checkbox" : { "override_ui" : true },
            "themes" : { "icons" : false },
            "json_data" : { "data" : ${permissionTree} }
        });
    });
</script>

To have more dynamic control over it, I moved the script into a javascript file and give it the ability to display different information. For testing purposes, though, I am using the exact same data as before.

Setup #2

function getPermissions(str) {
$.getJSON("getPermissions.htm", {id : str},
    function(data) {
        $(function () {
            $("#permissions").jstree({ 
                "plugins" : [ "themes", "json_data", "checkbox", "sort", "ui" ],
                "checkbox" : { "override_ui" : true },
                "themes" : { "icons" : false },
                "json_data" : { "data" : JSON.stringify(data) }
            });
        });
    });

}

With setup #2, however, the tree displays raw JSON, not a tree. I’ve confirmed that in both instances that data is the same. So what gives? Why does it not work this way?

Answer 1

"data" in the following snippet is supposed to contain an object or array value.

"json_data" : { "data" : JSON.stringify(data) }

try this instead:

"json_data" : { "data" : data }