Can't get jQuery plugin jsTree to initially select a node

Question

I have jsTree loading data from a JSON page and it displays correctly. I am trying to select the root node by default but I can't get it to work.

Here is my jQuery:

$(function () {
    $("#demo1").jstree({ 
        "plugins" : [ "themes","json_data","ui" ],
        "json_data" : {
            "ajax" : {
                "url" : "categorytreejson.asp"
            },
            "ui" : {
                "initially_select" : [ "root" ]
            },
        }
    });
});

---

Here is my JSON from categorytreejson.asp which validates using JSONLint:

{
  "data": "root",
  "attr": {
    "id": "root"
  },
  "children": [
    {
      "data": "Photography",
      "attr": {
        "id": "Photography"
      },
      "children": [
        {
          "data": "Lenses",
          "attr": {
            "id": "Lenses"
          },
          "children": [
            {
              "data": "Telephoto",
              "attr": {
                "id": "Telephoto"
              }
            },
            {
              "data": "Macro",
              "attr": {
                "id": "Macro"
              }
            },
            {
              "data": "Other",
              "attr": {
                "id": "Other"
              }
            }
          ]
        }
      ]
    }
  ]
}

---

Here is the resulting HTML:

<li class="jstree-last jstree-open" id="root"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>root</a>
    <ul style="">
        <li class="jstree-closed" id="Photography"><ins class="jstree-icon">&nbsp;</ins><a class="" href="#"><ins class="jstree-icon">&nbsp;</ins>Photography</a>
            <ul>
                <li class="jstree-last jstree-closed" id="Lenses"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Lenses</a>
                    <ul>
                        <li class="jstree-leaf" id="Telephoto"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Telephoto</a>
                        </li>
                        <li class="jstree-leaf" id="Macro"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Macro</a>
                        </li>
                        <li class="jstree-last jstree-leaf" id="Other"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>Other</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
</li>
</ul>
</li>
</ul>
</li>

---

And the resulting data object viewed by firebug:

args: []
inst: Object { data={...}, get_settings=function(), _get_settings=function(), more...}
rlbk: false
rslt: undefined

I'm assuming most of the problem is because result is empty but I'm not sure why?

Answer 1

You are putting the UI plugin configuration inside the json_data plugin configuration.
You need to take it out, and it will work.

    "json_data" : {
        "ajax" : {
            "url" : "categorytreejson.asp"
        }
    },
    "ui" : {
        "initially_select" : [ "root" ]
    }

Answer 2

In bind function of jstree add the following line to select the last node when tree is loaded-

$('#tree_id').jstree('select_node', 'ul > li:last');

To select first node always, use-

$('#tree_id').jstree('select_node', 'ul > li:first');

Example-

$('#tree_id').bind("loaded.jstree", function(e, data) {
    $(this).jstree("open_all");
    $('#tree_id').jstree('select_node', 'ul > li:last');
})