“Fun” with Prototype and IE7 and Tables
Its a known fact that DOM manipulation on TABLE in IE is a mine field. I thought I could get lucky with prototype when it comes to creating DOM elements on the fly. But apparently not! In particular html TABLES. So here are some of the "gotcha" moments I've had!
-
Every table needs a body
var table = Builder.node("table", [Builder.node("tr", [Builder.node("td")])]);This piece of code will render a nice table on Firefox and Safari. But unfortunately not on IE. You need to create a TBODY explicitly for IE to make sense out of this. So you need something like
var table = Builder.node("table", [Builder.node("tbody", [Builder.node("tr", [Builder.node("td")])])]);for this to work. -
Table with inline style attribute will break your javascript
var table = Builder.node("table", [Builder.node("tbody", [Builder.node("tr", [Builder.node("td" , {style:"background:blue;"})])])]);Again this piece of code will create a table with the single cell and the background is set to blue. Works like a charm in Firefox and Safari. But not IE7! This also applies to styles applied to table rows, columns and table headers. Only way around is to define a className attribute and assign a class name or set styles directly onto the DOM element like
object.style.background="blue";
Another very very annoying thing with prototype is that it does not have any error reporting mechanism. So the issues like these are harder to track down.
Popularity: 46% [?]
ddoctor
May 13th, 2008 at 2:57 pm
Lame, IE. Lame.
It “kinda” makes sense - document is already created - it doesn’t want to do any more parsing.
However, a lot of the flexibility of HTML is in that you can:
a) manipulate as objects
b) generate as text
And when (b) is gone, you really miss it… eg here, and in Java Swing.
When I first made an ajax table, I was really hoping I could do something like:
Builder.make(”blah)
… which was not to be. Which sux, because it conveys exactly the same amount of information as the nested Builder statement, it just hasn’t been parsed… oh, if only we had a HTML parser around… OH WAIT WE DO there’s a web browser right there!
ddoctor
May 13th, 2008 at 3:00 pm
Also….
You’re setting the “background-color” attribute, using the “background” shorthand attribute. “background:blue;” is completely valid, because all of the individual attribute values on “background” are optional.
I just wonder: does IE like “background-color” better? I’m guessing “no”, but it might be worth a try…. or probably not if you’ve already solved the problem!
Suneth Mendis
May 13th, 2008 at 3:10 pm
Actually it failed even with a border attribute. So having style: “border: 1px solid blue;” did not work… So I did not explore along that path any further… Just to save some time!
Michael McLawhorn
July 3rd, 2008 at 9:32 am
I ran into a related issue, that the attribute ‘class’ which is visible in Firefox as something.class = ‘foo’, in IE7, that statement caused the entire javascript file it was in to fail to LOAD without a meaningful error message.
The fix was to call it .className. Which is fine. Except that I’m not even sure how I was supposed to find that out.
Suneth Mendis
July 3rd, 2008 at 1:34 pm
You are spot on Michael. I ran into the same problem some time ago. The most annoying thing about Prototype or Scriptaculous Builder is that it does not show any error messages in the console.
So you are right. You got to use “className” (Case sensitive too) and not class if you are using the Scriptaculous Builder. Its always pays off to read the documentation!!! (http://github.com/madrobby/scriptaculous/wikis/builder)
Prototype also comes with a dynamic DOM builder function.
var container = new Element(’div’, { ‘class’: class_name });
Note how Prototype use “class” and not className here.