DomHelper Template using tables (bug in ff & insert at t

[aconran]

<script> 
var id = 3; 
function addProfile() { 
   var tplNode = document.getElementById('profile-template'); 
   var table = document.getElementById('profile-table'); 
   var tpl = new YAHOO.ext.DomHelper.Template(tplNode.value); 
   if (table.rows[0]) { 
      tpl.insertBefore(table.rows[0], {profilename: 'My Profile', id: id}); 
   } else { 
      tpl.append('profile-table', {profilename: 'My Profile', id: id}); 
   } 
   id++; 
}
</script>
<input type="button" onClick="addProfile();" value="Add a Profile"> 

<table> 
<tbody id="profile-table"> 
</tbody> 
</table> 

<textarea style="display:none" id="profile-template"><tr id="profile{id}"><td>{profilename} {id}</td></tr></textarea>

Jack -

I tried your advice as you can see here. This works in ff but not in IE, any ideas?

Aaron

[brian.moeskau]

Is there a reason why you're trying to get your template from body elements rather than simply defining it as a string?

var tpl = new YAHOO.ext.DomHelper.Template('<tr id="profile{id}"><td>{profilename} {id}</td></tr>');

[aconran]

Brian -

The reason I am storing the template in HTML is so that I can get separation between my javascript and HTML in a very clean way. As an aside I've tried to store the template directly in the code and receive the same error as before in IE.

Aaron

[brian.moeskau]

The reason I am storing the template in HTML is so that I can get separation between my javascript and HTML in a very clean way.

Not to get into a philosophical debate but the template isn't really part of your HTML! Even though it looks like HTML, it is an HTML template that only exists because of, and is only used by, your javascript code. Thus, it is part of your javascript. I wouldn't fret too much about trying to keep it separate personally, especially if you have to resort to hacking it up anyway.

[jhericks]

Is this a known bug that is fixed in the new release? Is there a known workaround I can use without going through the migration to the new code?

I get the same invalid pointer exception in IE that others have mentioned. The exception is being thrown from this method:

    var insertIntoTable = function(tag, where, el, html){
        if(!tempTableEl){
            tempTableEl = document.createElement('div');
        }
        var node;
        if(tag == 'table' || tag == 'tbody'){
           tempTableEl.innerHTML = '<table><tbody>'+html+'</tbody></table>';
           node = tempTableEl.firstChild.firstChild.firstChild;
        }else{
           tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
           node = tempTableEl.firstChild.firstChild.firstChild.firstChild;
        }
        if(where == 'beforebegin'){
            el.parentNode.insertBefore(node, el);
            return node;
        }else if(where == 'afterbegin'){
            el.insertBefore(node, el.firstChild);
            return node;
        }else if(where == 'beforeend'){
            el.appendChild(node);
            return node;
        }else if(where == 'afterend'){
            el.parentNode.insertBefore(node, el.nextSibling);
            return node;
        }
    }

The tag is 'tr' and the where string is "afterend". The html string is (all one line):

"<tr valign=\"top\" class=\"observation-list-row\" id=\"observationListRow12367828\"><td align=\"left\" rowspan=\"2\" class=\"noprint\"><input type=\"checkbox\" name=\"deleteID\" value=\"12367828\"/></td><td align=\"left\">Red Cat B</td><td align=\"left\">Red Cat B2</td><td align=\"left\"></td><td align=\"left\"><a href=\"/CRMApp/company/CompanyView.do?id=70585\">A & L Contractors, Inc.</a></td><td align=\"left\"><font color=\"green\">Nice</font></td><td align=\"left\"></td><td align=\"center\"></td><td align=\"left\" nowrap=\"true\"></td><td align=\"left\" class=\"noprint\"><a href=\"#\">Edit</a></td></tr>"

Control flows to the first 'else', but node gets set to null. I'm getting this calling myTemplate.insertAfter(headerRow, values, true). headerRow is the first row in the table. The table looks like this:

<table border="0" cellpadding="1" cellspacing="1" class="listTable">
 <tbody>
  <tr class="header" id="observationListHeader">
   <td align="center" class="noprint"></td>
   <td align="center" class="columnHeader">Category</td>
   <td align="center" class="columnHeader">Sub-Category</td>
   <td align="center" class="columnHeader">Project Segment</td>
   <td align="center" class="columnHeader">Contractor</td>
   <td align="center" class="columnHeader"></td>
   <td align="center" class="columnHeader">Unsafe Conditions -
   Severity</td>
   <td align="center" class="columnHeader">Done?</td>
   <td align="center" class="columnHeader">Due / Completed</td>
   <td align="center" class="noprint"></td>
  </tr>
 </tbody>
</table>