Question

Here’s my situation: using PHP and MySQL as my backend, jQuery and jsTree for my front end.

My tree is on the left, and clicking on a node will trigger certain information to be loaded in a box floated to the right of the tree. They can add/edit/remove nodes in this tree with this behavior (no page reload, all Ajax).

Currently, I can successfully add a node to the tree. I take user input for the new node, and if everything passes validation (client-side first, server-side second), a new “node” is added to my MySQL database, and then I update the jsTree on the fly with some Javascript by adding a new node to it’s parent (on initial page load, PHP correctly builds an HTML tree with unordered lists and list items).

My simple question: how do I add a new node to the jsTree with an “ID” attribute for the list item (“LI”)?

For reference, here’s what my HTML tree looks like. This is handed to jsTree and it’s HTML_DATA plugin:

<ul>
    <li class="plant" id="plant_3"><a href="javascript:void();">Plant Three</a>
     </li>
    <li class="plant" id="plant_1"><a href="javascript:void();">Plant One</a>
  <ul>
          <li class="area" id="area_2"><a href="javascript:void();">Area Two</a>
       </li>
          <li class="area" id="area_1"><a href="javascript:void();">Area One</a>
    <ul>
            <li class="building" id="building_1"><a href="javascript:void();">Building One</a>
      <ul>
              <li class="floor" id="floor_2"><a href="javascript:void();">1st Floor</a>
           </li>
              <li class="floor" id="floor_3"><a href="javascript:void();">2nd Floor</a>
           </li>
              <li class="floor" id="floor_1"><a href="javascript:void();">Ground Floor</a>
           </li>
          </ul>
         </li>
        </ul>
       </li>
      </ul>
     </li>
</ul>

My clicking actions are keyed on the unique ID’s that each node has (“plant_1”, “area_3”, etc.) Currently, when I add a jsTree node, I do it this way (through the CRRM plugin):

$("#my_tree").jstree("create", null, false, name, {attr : "id=plant_"+id}, true);

#my_tree is initialized with this:

$("#my_tree").jstree({
 "ui" : {
     "select_limit" : 1,
     "selected_parent_close" : "select_parent"
 },
 "html_data" : {
     "ajax" : {
  "url" : "file.php?action=get_my_tree",
  "data" : function (n) {
      return {
   id : n.attr ? n.attr("id"): 0
   };
  }
     }
 },
 "core" : {
     "animation" : 0
 },
 "plugins": [ "ui", "themes", "html_data", "hotkeys", "crrm"]
    });

Any ideas? The CRRM plugin documentation mentions a third parameter (in my code above, its the “{attr : “id=plant_”+id}”) that defines ‘attr’ data in object form.

An ideal solution would be the proper object to pass to jsTree+CRRM, but I’d look for even a hacked solution where an additional line of Javascript after my “create” line, where I “manually” add an ID to the newly inserted LI item.

For reference, here’s the HTML that jsTree inserts with my “create” line above:

<li class="jstree-leaf"><ins class="jstree-icon">&nbsp;</ins><a href="#"><ins class="jstree-icon">&nbsp;</ins>New Node!</a></li>

Answer 1

So, the problem with this line:

$("#my_tree").jstree("create", null, false, name, {
    attr : "id=plant_" + id
}, true);

Is that the Javascript object’s attr is also an object. The correct line is as follows:

$("#my_tree").jstree("create", null, false, name, {
    attr : {
        id: 'plant_' + id
    },
    data: name
}, true);

So you can determine several attributes to give your new leaf. The “id” attribute is actually given to the LI (list item), which is precisely what I needed.

The jsTree documentation does mention that the attributes should be JS objects themselves, but I’m not overly familiar with a lot of the Javascript syntax, including objects.

Just for posterity, here’s what is added to the jsTree’s HTML:

<li id="plant_x" class="jstree-leaf">
    <ins class="jstree-icon">&nbsp;</ins>
    <a href="#">
        <ins class="jstree-icon">&nbsp;</ins>
        New Node!
    </a>
</li>