“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.

About this entry

You’re currently reading ““Fun” with Prototype and IE7 and Tables,” an entry on SlackCoders.com

Published:: 05.13.08 / 12am

Category:: JavaScript

Twitter

Xcode behaves very well when you got 16gb of ram... # 2012/01/30

I'm so used to OSX Lion scrolling now, going the other way makes no sense at all!!! Like wearing the watch on the wrong hand... # 2012/01/16

Should I buy an Apple TV? # 2012/01/14

Back home after 2 awesome weeks in Thailand. Good to be back. # 2012/01/07

The rationality of gift giving. http://t.co/xwdjlAG8 # 2011/12/21

ddoctor 05.13.08 / 2pm

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 05.13.08 / 3pm

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 05.13.08 / 3pm

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 07.03.08 / 9am

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 07.03.08 / 1pm

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.

Richard Glanvill 11.01.08 / 7am

If the output generated by prototype DOM builder (new Element) does not display as expected in IE, try changing the case of the attributes in.

example:
This:
var tbl = new Element(‘table’, { ‘cellspacing’ : 0 };

..should be:
var tbl = new Element(‘table’, { ‘cellSpacing’ : 0 };

SlackCoders.com

“Fun” with Prototype and IE7 and Tables

About this entry

6 Comments

Have your say

Recent Posts

Categories

Pages

Twitter