Question

I have an instance of jstree. It is ajax with json.

Here is how I am creating the tree.

        $("#tree").jstree({
            "plugins" : ["themes", "json_data", "ui"],
            "json_data" : {
                "ajax" : {
                    "type": 'GET',
                    "url": function (node) {
                        var nodeId = "";
                        var url = ""
                        if (node == -1)
                        {
                            //first url called is static
                            url = "myUrl";
                        }
                        else
                        {
                           //click on a node "li", get the id, append it to the url.
                           nodeId = node.attr('id');
                           url = "myUrl" + nodeId;
                        }

                        return url;
                    },
                    "success": function (new_data) {
                       //get the data topNode out of the json object
                       new_data = new_data.topNode;

                       return new_data;
                    }
                }
            },

        }); 

Here is the output.

<div id="tree" class="jstree-classic jstree jstree-0 jstree-focused jstree-default">
    <ul>
        <li class="jstree-closed jstree-last">
            <ins class="jstree-icon">&nbsp;</ins>
            <a class="" href="#">Item 1</a> 
        </li>
    </ul>
</div>

However when the tree is rendered the <LI> element does not have an id. Should be automatically appended to the <LI>. What am i missing?

Answer 1

If below is your data returned from ajax call you need to move "id":"1" to attributes section

{"topNode":{"data":"Item 1",
            "children":[],
            "state":"closed",
            "id":"1",
            "attributes":{"class":"editContainerL‌​ink","href":"#"}
           }
}

so it would look like

{"topNode":{"data":"Item 1",
            "children":[],
            "state":"closed",
            "id":"1",
            "attributes":{"class":"editContainerL‌​ink",
                          "href":"#",
                          "id":"1"
                          }
           }
}