jsRender table header rows are lost when template is added

Question

I have a comment table that I am rendering using the jsRender templates. When the Add Comment button is clicked, a comment is added and the table displaying the comments is refreshed with the template but when that happens its removing the table header rows which are coded in html on the page itself. When the page first loads, before the template is executed, they show fine. I know they disappear once the template renders but I can't see the reason why.

This is the table on the page:

<table id="tblComments" width="98%" cellspacing="0" class="TableFormat">
<tbody>
    <tr>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; ">Comment</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Date Added</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Added By</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:24px"></th>
    </tr>
</tbody>

This is the ajax call that populates the table:

$.ajax({
    type: "Post",
    url: "ws.asmx/addComment",
    data: "{comment:" + JSON.stringify(comment) + ", ID:'" + ID + "', TypeID:" + TypeID + "}",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function (data) {
        var myData = data.d;
        $('#tblComments').html($.templates.Comments.render(myData));
        },
    complete: function() {
        $clickedControl.remove_loadingPhase();
    },
    error: function(xhr) {
        alert($.parseJSON(xhr.responseText).Message);
    }
});

This is the template itself:

$.templates('Comments',
'{{for}}' +
    '<tr>' +
       '<td style="vertical-align:top; text-align:left;">' +
           '<p style=" margin:3px 0;">' +
               '{{:comment}}' +
           '</p>' +
       '</td>' +
       '<td style=" vertical-align:top; text-align:left;">' +
           '{{:CreateDate}}' +
       '</td>' +
       '<td style=" vertical-align:top; text-align:left;">' +
           '{{:FullName}}<br />' +
           '{{:CommandVal}}' +
       '</td>' +
       '<td>' +
          '{{if isDel}}' +
               '<a onclick="deleteCmt(this)">' +
                   '<img style="border:0" src="/images/delete.png" alt="DELETE" title="Delete" />' +
               '</a><input type="hidden" id="delID" value="{{:CommentID}}" />' +
           '{{/if}} ' +
       '</td>' +
    '</tr>' +   
'{{/for}}');

And here is what the table looks like in page source after the template has rendered:

<table id="tblComments" width="98%" cellspacing="0" class="TableFormat">
<tbody>
    <tr>
        <td style="vertical-align:top; text-align:left;"><p style=" margin:3px 0;">testing 5</p></td>
        <td style=" vertical-align:top; text-align:left;">12/17/2013 4:45:40 PM</td>
        <td style=" vertical-align:top; text-align:left;">Hall, Samuel<br>American Greetings</td>
        <td><a onclick="deleteCmt(this)"><img style="border:0" src="/images/delete-icon.png" alt="DELETE" title="Delete"></a><input type="hidden" id="delID" value="eSknynCdbsE="> </td>
    </tr>
    <tr>
        ...additional rows print out below...
    </tr>
</tbody>

Answer 1

You are in effect doing this:

var html = $.templates.Comments.render(myData);
$('#tblComments').html(html);

That second line is replacing the innerHTML of your targeted '#tblComments' element which is the <table> element - so of course you are removing the header rows.

You probably want:

<table width="98%" cellspacing="0" class="TableFormat">
<thead>
    <tr>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; ">Comment</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Date Added</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:20%">Added By</th>
        <th style="background-color:#628DB5; color:#FFF; font-weight:bold; width:24px"></th>
    </tr>
</thead>
<tbody id="tblComments"></tbody>
</table> 

I'm not sure why you have {{for}} - it is not doing anything.

If you want to add the comments to the previous set of comments, you need to manage your comments array and append to it. You could use JsViews to dynamically insert rows...