jQuery SimpleTree: Add a node programatically

Question

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?

Answer 1

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')

Answer 2

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

Answer 3

Maybe take a look at jsTree

Answer 4

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);
      }
     };