CODEWITHSUNDEEP
javascriptajaxjstree
Jon Tinsman
Jon Tinsman

Reputation: 586

jsTree not rendering using AJAX

I am trying to implement jsTree and AJAX to display a dynamic file structure on a server. I have the webpage setup as

<div id="tree">
</div>

My Javascript is

    $(document).ready(function(){

        $('#tree').jstree({
            'core' : {
                'data' : {
                    'url' : function(node) {
                        return 'folder/?folder=' + ((node.id === '#')?'':node.id);
                    },
                    'type': 'GET',
                    'dataType': 'json',
                    'contentType':'application/json',
                    'data' : function (node) {
                        return { 'id' : node.id };
                    }
                }
            }
        });
    });

My Java endpoint returns a String in this JSON format.

[
    {
        "id":"ci/",
        "text":"ci",
        "parent":"#"
    },
    {
        "id":"dev/",
        "text":"dev",
        "parent":"#"
    },
    {
        "id":"prod/",
        "text":"prod",
        "parent":"#"
    }
]

When I put break-points in the javascript and the Java back, I see "url" function getting called first, then "data" function and then it goes to the back-end. It returns the String, but nothing happens. My only shows "Loading..."

I downloaded the jsTree from https://github.com/vakata/jstree/zipball/3.0.8 and I am including the two files from the zip

<script src="${pageContext.request.contextPath}/js/vendor/jstree.min.js"></script>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.min.css">

Ideally what I am trying to do is build out a folder tree structure that a user will eventually select the location for a file upload to S3. I want to lazy load the folders on click and the id will be the folder path (i.e. dev/en_US/someFolder/images/)

Upvotes: 1

Views: 2422

Answers (2)

Jon Tinsman
Jon Tinsman

Reputation: 586

I found the issue with it not rendering. Even though the documentation states that if the JSON headers are not set, then you can specify "dataType" : "json" it doesn't work. I had to go to my method and add the return type as "application/json" to the method. It then worked.

Upvotes: 3

xploshioOn
xploshioOn

Reputation: 4125

maybe the problem is that you are loading content by ajax, so when the document is ready the treejs plugin try to read the data but the ajax still doesn't have the response, so, you have to "recall" your document.ready function to have the plugin use the data when the ajax request is completed...

is something like this answer, different circunstances but same case.

https://stackoverflow.com/a/26559809/2043592

Upvotes: 0

Related Questions