dynamically add rows to jquery treetable not at root

I'm using the treetable plugin and I want to dynamically load some rows of data from a Taffy db previously populated from an xml file. I've verified that loadBranch works fine on the root of the table using "null" as the node but I can't seem to make it child of the first row.

HTML:

<table id='data_tree'>
<tr class="branch" data-tt-id="1">
<td>Studies</td>
</tr>
</table>

Javascript:

$(window).load(function(){
    studies_db().each( function (record,recordnumber) {
        $("#data_tree").treetable("loadBranch",1,
                            "<tr>"+
                            "<td><b>Accession:</b> "+record.accession+"<br>"+
                            "<b>Title:</b> "+record.title+"<br>"+
                            "<b>Authors:</b> "+record.authors+"<br>"+
                            "<b>Release date: </b>"+record.date+"<br>"+
                            "<b>Number of markers: </b>"+record.samples+"<br>"+
                            "</td></tr>")
         });
});

Solution

The loadBranch function expects a Node object, not a node identifier. Try this instead:

$(window).load(function(){
  studies_db().each( function (record,recordnumber) {
    var node = $("#data_tree").treetable("node", "1");

    $("#data_tree").treetable("loadBranch", node,
      "<tr data-tt-id='2'>"+
      "<td><b>Accession:</b> "+record.accession+"<br>"+
      "<b>Title:</b> "+record.title+"<br>"+
      "<b>Authors:</b> "+record.authors+"<br>"+
      "<b>Release date: </b>"+record.date+"<br>"+
      "<b>Number of markers: </b>"+record.samples+"<br>"+
      "</td></tr>");
  });
});

Note that I've also added a data-tt-id attribute to the tr, otherwise the treetable plugin will complain.

I have to admit that it is confusing that some functions expect a node identifier and others a Node object... This is something that should be streamlined in the future.

dynamically add rows to jquery treetable *not at root*

dynamically add rows to jquery treetable not at root