PDA

View Full Version : DomHelper Problem



INeedADip
18 Oct 2006, 10:07 AM
My code:



var dh = YAHOO.ext.DomHelper;
var tbl = dh.append('eTabSections', {tag: 'table', cls: 'sectionTable'});
var tr = {
tag: 'tr',
children : [{
tag: 'td',
cls: 'wizOption',
children : [{
tag: 'a',
href: 'javascript:menuAddThis({0})',
title: '{1}',
children : [{
tag: 'img',
src: '/images/Editor/iconAdd.gif',
title: '{1}'
}]
}]
},{
tag: 'td',
cls: 'wizOptionTitle',
html: '{1}'
}]
};

var template = YAHOO.ext.DomHelper.createTemplate(tr);
template.compile();

var tBody = template.append(tbl, ['1', "Here is a title"]);


This works fine in FireFox, but I'm having a problem in IE 7. The problem is the last line. I get an error: "Invalid Target Element for the operation".

If I erase the last line the <table> element gets added from the second line. But the last line errors out. Any suggestions? Am I doing something stupid here?

INeedADip
18 Oct 2006, 10:20 AM
Also...let me confess that I don't have the entire ext library included. I ONLY have the DomHelper-min.js included. Could this be a problem?

In effect I've got:

YAHOO.namespace('ext');
then I pasted the DomHelper-min.js

INeedADip
18 Oct 2006, 10:23 AM
It looks like the problem is in the function:

this.insertHtml = function(where, el, html){
..
..
el.insertAdjacentHTML(where, html); <--- Possible problem
}

That is the line number that IE 7 is giving me anyways.

jack.slocum
18 Oct 2006, 10:24 AM
IE requires a tbody tag. Firefox adds it for you implicitly.

INeedADip
18 Oct 2006, 10:30 AM
So now I changed the "second line" to:



var tbl = dh.append('eTabSections', {tag: 'table', cls: 'sectionTable', children: [{tag: 'tbody'}]});


but I still get the same error? Am I misunderstanding?

jack.slocum
18 Oct 2006, 10:45 AM
The TRs need to be appended to the tbody.



var tbl = dh.append('eTabSections', {tag: 'table', cls: 'sectionTable', children: [{tag: 'tbody'}]});
// get tbody element
var tbody = tbl.firstChild;

...

var template = YAHOO.ext.DomHelper.createTemplate(tr);
template.compile();

// append to tbody
var tr = template.append(tbody, ['1', "Here is a title"]);

INeedADip
18 Oct 2006, 10:56 AM
I hate posting this much.....I am testing a couple things before just posting "this doesn't work"...but....

I still am having trouble in IE. Here is my exact code (works in FireFox)



var dh = YAHOO.ext.DomHelper;
var tbl = dh.append('eTabSections', {tag: 'table', cls: 'sectionTable', children: [{tag: 'tbody'}]});
var tbody = tbl.firstChild;
var tr = {
tag: 'tr',
children : [{
tag: 'td',
cls: 'wizOption',
children : [{
tag: 'a',
href: 'javascript:menuAddThis({0})',
title: '{1}',
children : [{
tag: 'img',
src: '/images/Editor/iconAdd.gif',
title: '{1}'
}]
}]
},{
tag: 'td',
cls: 'wizOptionTitle',
html: '{1}'
}]
};

var template = YAHOO.ext.DomHelper.createTemplate(tr);
template.compile();
alert(tbody.tagName.toString());
var newRow = template.append(tbody, ['1', "Here is a title"]);
alert(newRow.tagName.toString());


I get the first alert of "TBODY", but the next line errors out...still....
I really am not trying to flood your forums here...

jack.slocum
18 Oct 2006, 11:04 AM
It's ok. Thanks for posting the full code. It's looks fine, so let me pop this in a page and fool around with it.

jack.slocum
18 Oct 2006, 11:42 AM
Apparently this is a known bug in IE, even with a tbody. I have created a workaround though. It worked in my limited testing. The workaround only executes in IE - FF and other browsers work like normal.

http://www.jackslocum.com/build/DomHelper.js

INeedADip
18 Oct 2006, 11:51 AM
That worked great...thanks.

ojintoad
19 Oct 2006, 8:00 AM
I was just going to post on this issue, I'll try out the fix as well and report back if there are any problems.

ojintoad
23 Oct 2006, 3:37 PM
Table fix is okay. However, building a select box in IE isn't working quite right.

The dom inspector is telling me the options are what aren't working right. Code snippet...



this._selectTemplate = new YAHOO.ext.DomHelper.Template('<select></select>');
this._optionTemplate = new YAHOO.ext.DomHelper.Template('<option>{label}</option>');
var options = [teacher, builder, doctor, lawyer];
var inputElement = this._selectTemplate.append(fieldCell, {id: uniqueId, name: label});
for(var option in options){
this._optionTemplate.append(inputElement, {label: options[option]});
}


The IE Dom inspector shows the options being built with the correct label text, but without the opening tag. So you get #text</option>#text</option>.

jack.slocum
23 Oct 2006, 7:06 PM
The select box is the other problem child in IE. I can hack up another workaround but you'd get better performance by inserting them all at once anyway.



this._selectTemplate = new YAHOO.ext.DomHelper.Template('<select>{options}</select>');
this._optionTemplate = new YAHOO.ext.DomHelper.Template('<option>{label}</option>');
var options = [teacher, builder, doctor, lawyer];
var optionHtml = '';
for(var option in options){
optionsHtml += this._optionTemplate.applyTemplate({label: options[option]});
}
var inputElement = this._selectTemplate.append(fieldCell, {id: uniqueId, name: label, options: optionHtml});

Topper
29 Sep 2007, 4:16 AM
Apparently this is a known bug in IE, even with a tbody. I have created a workaround though. It worked in my limited testing. The workaround only executes in IE - FF and other browsers work like normal.

http://www.jackslocum.com/build/DomHelper.js

Dear Jack. Can you upload this file again? Im having the same issue with IE and seems that the file is missing in that URL.

Thx.