jQuery SimpleTree: Add a node programatically

I'm trying to add a new node to an jQuery SimpleTree, but all I seem to be able to get is "sTC.addNode is not a function"...

var simpleTreeCollection = $('.simpleTree').simpleTree({
 animate:true,
 drag:false,
 autoclose: false,
 afterClick:function(node){},
 afterDblClick:function(node){},
 beforeMove:function (destination, source, pos){},
 afterMove:function(destination, source, pos){},
 afterAjax:function() {},
 afterContextMenu:function(node){}
});

simpleTreeCollection.addNode('test', 'test');

Any suggestions what I might be doing wrong? Is there even the possibility to add a node?

From stackoverflow

• hmm tricky one this and I have to say I dont like the plugin as it uses numerics as id's and w3c states "The attribute's value must begin with a letter in the range A-Z or a-z and may be followed by letters......."

  However to get you working u need to select one of the nodes first in order to add to it like this

      //Select first child node in tree
      $('#2').click();
      //Add new node to selected node
      simpleTreeCollection.get(0).addNode(1,'A New Node')
  

  BlaM : It's got a nice "drag'n'drop" feature, even though that one needs some work, too (it's too sensitive, especially when right-clicking for context menus)... I don't think that you NEED to use pure numeric IDs... At least I don't have any and it works...

  BlaM : Hm, doesn't work. I get a "node[0] is undefined" in jquery.simple.tree.js. Maybe that's because I don't use numeric IDs... Guess I'll try yet another tree plugin. *sigh*

  redsquare : Hi BlaM, FYI the above code works in the firebug console on their demo page.

• Hi BlaM, FYI the above code works in the firebug console on their demo page. On your tree ake sure you use a correct selector to highlight the node

• Maybe take a look at jsTree

• I have solved it by editing the addNode funcion. I commented the temp_node.remove(); and added dragNode_destination.after(dragNode_source);

  Just like that:

          TREE.addNode = function(id, text, callback)
       {
        var temp_node = $('<li><ul><li id="'+id+'"><span>'+text+'</span></li></ul></li>');
        TREE.setTreeNodes(temp_node);
        dragNode_destination = TREE.getSelected();
        dragNode_source = $('.doc-last',temp_node);
        TREE.moveNodeToFolder(dragNode_destination);
  //    temp_node.remove();
        dragNode_destination.after(dragNode_source);
        if(typeof(callback) == 'function')
        {
         callback(dragNode_destination, dragNode_source);
        }
       };