Question posted in
You can find the official documentation here.

How to generate a jstree using AJAX? – Jquery ajax

I have been having problems generating a JsTree using data from my server. I have tried different formats and appending an existing tree, no dice. The only thing that happens is that it the jstree div gets replaced by

<div id="jstree" class="jstree jstree-1 jstree-default jstree-leaf" role="tree" aria-multiselectable="true" tabindex="0" aria-activedescendant="j1_loading" aria-busy="false"><ul class="jstree-container-ul jstree-children" role="group"></ul></div>

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jsTree test</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
</head>
<body>
  <div id="jstree">

  </div>

  <script>
  $(function() {
    $.ajax({
        async : true,
        type : "GET",
        url : "/treeTest2",
        dataType : "json",    

        success : function(json) {
            // alert(JSON.stringify((json)));
            createJSTrees(json);
        },    

        error : function(xhr, ajaxOptions, thrownError) {
            alert(xhr.status);
            alert(thrownError);
        }
    });
});    

function createJSTrees(jsonData) {
    $("#jstree").jstree({
        "json_data" : {
            "data" : jsonData
        },
        "plugins" : [ "themes", "json_data", "ui" ]
    }).bind("select_node.jstree", function (e, data) {  
    alert(e);
    });
}
</script>
</body>
</html>

Heres what the alert(JSON.stringify((json))); returns

[
    {
        "a_attr": {
            "id": 1
        },
        "text": "lvl1",
        "icon": "snipplet",
        "metadata": null,
        "children": [
            {
                "a_attr": {
                    "id": 3
                },
                "text": "lvl2",
                "icon": "snipplet",
                "metadata": null,
                "children": [
                    {
                        "a_attr": {
                            "id": 5
                        },
                        "text": "lvl3",
                        "icon": "snipplet",
                        "metadata": null,
                        "children": []
                    }
                ]
            },
            {
                "a_attr": {
                    "id": 4
                },
                "text": "lvl2",
                "icon": "snipplet",
                "metadata": null,
                "children": []
            }
        ]
    },
    {
        "a_attr": {
            "id": 2
        },
        "text": "lvl1",
        "icon": "snipplet",
        "metadata": null,
        "children": []
    }
]

The metadata tag is needed for data that will be needed later. Everything will be otganised into folders and snipplets. And the id tag will be used in hyperlinks.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Here's the solution.

    function createJSTrees(jsonData) {
    $("#kautkas").jstree({  
        'core' : {  
            'data' : jsonData  
        }   
    });  
}

  2. 0

    I believe id="jstree" conflicts with the global variable jstree.

    Indeed, If you give an ID to an element, this element is directly available in JS, without doing anything :

    myGreatDiv.innerHTML = "It works"
    <div id="myGreatDiv"></div>

    So, you include the JsTree library, which defines window.jstree.
    Then, you create a div with id="jstree", which automatically overwrites window.jstree.

    Solution (I guess) : call your div something else, like

    <div id="jstree_div">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search