Faulty DomHelper.Template behaviour while adding table rows

[manugoel2003]

Hi,

I have already followed the following 2 threads -

http://www.yui-ext.com/forum/viewtopic.php?p=8186
http://www.yui-ext.com/forum/viewtopic.php?p=8125

But it didn't help much. I am posting a simplified version of my code here



<div id="sample"></div>

<script language="JavaScript">
var dh = YAHOO.ext.DomHelper;
dh.append('sample', {
tag: 'table',
id: 'myTable',
cellspacing: '0px',
cellpadding: '0px',
align: 'center',
border: '1px'
});
row = YAHOO.ext.DomHelper.createTemplate({
tag: 'tr',
children: [{
tag: 'td',
title: '{tooltip}',
html: '{label}'
},{
tag: 'td',
title: '{tooltip}',
html: '{label}'
}]
});
row.append('myTable', {label: 'First Row', tooltip: 'First Row'});
row.append('myTable', {label: 'Second Row', tooltip: 'Second Row'});
row.append('myTable', {label: 'Third Row', tooltip: 'Third Row'});
row.append('myTable', {label: 'Fourth Row', tooltip: 'Fourth Row'});
</script>

what it does is, it inserts multiple tbody tags in the table, which shows fine on FF but disappears completely on IE.

To make it work on IE I made a slight change


var tbody = getEl('myTable').dom.tBodies[0];
row.append(tbody, {label: 'First Row', tooltip: 'First Row'});
row.append(tbody, {label: 'Second Row', tooltip: 'Second Row'});
row.append(tbody, {label: 'Third Row', tooltip: 'Third Row'});
row.append(tbody, {label: 'Fourth Row', tooltip: 'Fourth Row'});

But now it does not work in FF

Anybody has any suggestions??

[JeffHowden]

Have you tried something like this?



<div id="sample"></div>

<script language="JavaScript">
var dh = YAHOO.ext.DomHelper;
dh.append('sample', {
tag: 'table',
id: 'myTable',
cellspacing: '0px',
cellpadding: '0px',
align: 'center',
border: '1px' ,
children: [{ tag: 'tbody', id: 'myTbody' }]
});
row = YAHOO.ext.DomHelper.createTemplate({
tag: 'tr',
children: [{
tag: 'td',
title: '{tooltip}',
html: '{label}'
},{
tag: 'td',
title: '{tooltip}',
html: '{label}'
}]
});
row.append('myTbody', {label: 'First Row', tooltip: 'First Row'});
row.append('myTbody', {label: 'Second Row', tooltip: 'Second Row'});
row.append('myTbody', {label: 'Third Row', tooltip: 'Third Row'});
row.append('myTbody', {label: 'Fourth Row', tooltip: 'Fourth Row'});
</script>

[manugoel2003]

thanx Jeff, that surely helped...... I had little trouble locating the difference in the code though :D , u shud have higlighted it.....

Any idea how to integrate event handling into it.... I have another post regarding this
http://www.yui-ext.com/forum/viewtopic.php?t=2168

[JeffHowden]

Sorry, I tried a couple of things and couldn't figure out a good way to highlight it.

As far as event handlers or nested templates, I've no idea. I actually haven't done a lot with templates yet, but knew right off the bat why you're template involving tables was failing as that's a common mistake when scripting the creation of tables, row, and cells.

[tryanDLS]

I would think you'd want to just add your events to the table element rather than the individual elements for performance reasons.

[manugoel2003]

I know it would affect the performance, but I dont see any other alternative..... Its not just abt the table rows.... I have some dynamically placed controls inside those rows whose position is NOT what I am interested in..... I am fetching their behaviour through JSON so I dont know which one requires an onclick event and which one requires an onchange event.... so I AM interested in attaching an event handler to only those controls which require them, as per the JSON.....

Moreover, though Jeff's suggestion has solved my problem, but it is still a bug.... adding a TR to TABLE element is perfectly allright and if there already is a TBODY then it should be managed accordingly....

[Animal]

It's not a bug. It's the way HTML source code is allowed to be written - with no TBODY element, but the DOM contains a TBODY, and that's what you append TRs to.

[Animal]

http://www.w3.org/TR/html401/struct/tables.html#h-11.2.1

[manugoel2003]

Thanx for correcting me Animal, I agree now that it is not a bug..... but I would say that it is not very obvious, not to mention most of us are not very aware of the standards (including me).... so it might be better to handle that inside the append method....

[Animal]

That's up to Jack. I don't think it would be worth putting in all the checks though. Better just to make Ext programmers get it right. Ultra-tolerant browsers have a lot to answer for! But then, I suppose the web would have taken a lot longer to become ubiquitous if browsers had insisted upon correct, validating HTML!