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

I have 2 issues one seems to be a bug in firefox when using compiled templates and the 2nd is a question of the best way to insert a tr at the top of a table. I am using both the latest copy of yui and yui-ext.

Issue 1:
I am using the YAHOO.ext.DomHelper library to add a tr to a table. I have noticed that there is an exception in firefox when using the following code. If I do not compile teh template it works fine.

Code:

---

<script>
var id = 3;
function addProfile() {
        var tplNode = document.getElementById('profile-template');
        var tpl = new YAHOO.ext.DomHelper.Template(tplNode.innerHTML);
        tpl.compile();
        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">
        <tr id="profile1"><td>Profile 1</td></tr>
        <tr id="profile2"><td>Profile 2</td></tr>
</tbody>
</table>

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

---

The error is
Error: unterminated string literal
Source File: Desktop/test/javascripts/yahoo/yui-ext.js
Line: 183, Column: 42
Source Code:
this.compiled = function(values){ return ['

Issue 2:
I noticed that I needed to explicitly define a tbody tag and give it an id to get things to work (instead of giving an id to the table). My question is what is the best way to insert a tr at the top of the table. insertAfter will actually insert it after the tbody tag and of course it doesn't render. append will add it successfully to the end of the table.

remove newlines from your div...the template should be all on one line.

Jack, can we fix this? :-)

My best advice is to wait till Jack releases his new MasterTemplate class wich will enable you to do these kind of things alot easier!

It will be released in the svn pretty soon i guess.

Jarred -

Thanks for the quick response on the newlines in the template html. This fixes the firefox compilation issue. It also fixes the same issue in the latest version of Opera.

Aaron


Does anyone have any ideas on the easiest way to insertRow(0) other than retrieving the top most row id and using 'insertBefore'?

The new lines problem with compile is corrected locally, as are single quotes.

To insert the row, use insertBefore with the tbody's first child.

Code:

---

<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.innerHTML);
        tpl.compile();
        if (table.childNodes[0]) {
                var firstTRID = table.childNodes[0].getAttribute('id');
                tpl.insertBefore(firstTRID, {profilename: 'My Profile', id: id});
        } else {
                tpl.append('profile-table', {profilename: 'My Profile', id: id});
        }
        id++;
}
</script>

---

This my attempt yet failure at doing this.... IE throws an error with an invalid pointer and ff says that getAttribute is not a method.

First child of the table probably won't be a tr. It could be the tbody, but in your case is likely to be a character node - I guess you have a line end after the "<table>" tag - that's preserved in the DOM.

A Character Node is not an Element, and so will not have getAttribute.

Bookmark this: http://www.w3.org/TR/DOM-Level-2-Cor...t-binding.html

And use Firebug's "HTML" view to familiarize yourself with the structure of your document.

table.rows[0]

I tried this and seem to be doing something wrong again...

Code:

---

<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.innerHTML);
  if (table.rows[0]) {
      var firstTRID = table.rows[0].getAttribute('id');
      tpl.insertBefore(firstTRID, {profilename: 'My Profile', id: id});
  } else {
      tpl.append('profile-table', {profilename: 'My Profile', id: id});
  }
  id++;
}
</script>

---

IE gives me an invalid pointer exception when it uses insertBefore and FF & Opera seem to just be putting HTML onto the page and not putting it in an actual TR. Any ideas?

Code:

---

function addProfile() {
  var tplNode = document.getElementById('profile-template');
  var table = document.getElementById('profile-table');
  var tpl = new YAHOO.ext.DomHelper.Template(tplNode.innerHTML);
  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++;
}

---

The id isn't required. I think your problem is going to be the way you are doing your template. No browser is going allow a <tr> element to be sitting by itself in a div. They either going to wrap it in a table or throw it away, which means your template is going to bomb either way. Instead of a div, try using a textarea with display none and create the template from it's value.