Question

I am using jsTree and here is how I am initializing it…

function createJSTree(Data){
    $("#treeSelector").jstree({
            "plugins" : ["themes","json_data","UI","types"],
            "themes" : {
                "theme":"default",
                "dots": true,
                "icons" : true
            },
            "ui" : {
                "select_limit" : -1,
                "inititally_select" : ["root"]
            },
            "json_data" : {
                "data" : Data
            }
        });
}

I have another function performing an AJAX call and changing the JSON data I’m retrieving into how jsTree needs it.

function getData() {
    $.ajax({
        type: "GET",
        url: getUrl(),
        cache: false,
        dataType: "json",
        success: function(datas) {
           data = [];
           node = {};
           for (var dataNum=0; dataNum< datas.length; dataNum++){
               var element= datas[dataNum];
                           var children = getChildren(element.id);
               node = {
                   "attr" : {"id" : element.id},
                   "data" : element.name,
                   "state" : "closed",
                   "children" : [children]
                   };

               };
               data.push(node);
               createJSTree(data);
        }
    });
}

I would like it when I hover over a node, it highlights itself. I thought the “UI” plugin would do that but it isn’t.

Here is the HTML of one node. The link element isn’t getting a class created.

<ul style="">
    <li id="a59dk34n3" class="jstree-open">
       <ins class="jstree-icon"> </ins>
       <a href="#">
           <ins class="jstree-icon"> </ins>
           Computer10
       </a>
<ul style="">

Any thoughts?

Answer 1

I figured it out. It was a silly issue. I was putting “UI” in themes instead of “ui”. I copied it from somewhere and they had it as capitals. Strange.