PDA

View Full Version : Issue with DomHelper IE table handling



ncubeait
22 Dec 2006, 4:31 PM
Hi Jack,

Great work on the library!.

I believe I found a bug in the IE table hack work-around. Basically, "firstChild" was being called one too many times on tempTableEl. Here is the patched function:



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;
}else{
tempTableEl.innerHTML = '<table><tbody><tr>'+html+'</tr></tbody></table>';
node = tempTableEl.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;
}
}


Now the only problem with this work-around is that if you then try to dynamically set the innerHTML on one of the moved cells, IE will throw an error.

To try out, simply try to perform the following after moving the node:


node.innerHTML = '123';


If you do, IE will throw an "Unknown runtime error". Any suggestions on how to get around this?

William

jack.slocum
22 Dec 2006, 8:15 PM
It was the right amount of firstChild calls. Your patched function is returning the wrong child, which is why you are getting the runtime error.

In your version, you have:

tempTableEl.firstChild.firstChild for a tr insert.

The tempTableEl is the div, the first child is the table, 2nd is the tbody and the 3rd (which you deleted) would be the row. So you are inserting the tbody instead of the row.

JeffHowden
28 Dec 2006, 12:26 PM
... The tempTableEl is the div, the first child is the table, 2nd is the tbody and the 3rd (which you deleted) would be the row. So you are inserting the tbody instead of the row.

For those that don't know, IE will include a tbody as the first child in a table regardless of whether one is in the source or a DOM generated table or not. That's bound to throw you off a bit when walking the DOM to gain access to a particular row or cell.