Forum: Rails Spinoffs (closed, excessive spam) Firefox vs. IE 6/7 Behavior w.r.t tables and utility function $

Hi-

First post, so please forgive if this is the wrong place - it's where
the mailing list link from the Prototype library homepage sent me.

The following code gives a script error in IE 6/7 (assume the
attribute variables exist):

  var row = $('customOaTable').insertRow(-1);
  var foo = row.insertCell(-1);
  foo.writeAttribute(cellOpts);  // will error here
  foo.update(new Element('input', inputOpts));  // will also error
  row.insertCell(-1).update(new Element('input', inputOpts));  // same
here
  row.insertCell(-1).update(new Element('img', imgOpts));  // same
here

I found that the $ function in IE 6/7 isn't returning an Element
object as the API states (and apparently does in Firefox), I actually
have to do the following to get it to work:

  var row = $('customOaTable').insertRow(-1);

Element.extend(row.insertCell(-1)).writeAttribute(cellOpts).update(new
Element('input', inputOpts));
  Element.extend(row.insertCell(-1)).update(new Element('input',
inputOpts));
  Element.extend(row.insertCell(-1)).update(new Element('img',
imgOpts));

I don't mind doing this, but it seems excessive.  Am I just doing
something wrong, or is this the "right" behavior?  Any guidance would
be most appreciated.  Thanks.

--adam

This actually makes sense.
insertCell returns a reference to a newly inserted element. IE
obviously has none of the methods on a returned element. Have you
tried "wrapping" this into a helper method?

Element.addMethods('tr', {
  insertCell: function(element, index) {
    return $($(element).insertCell(index));
  }
});

// then the following should work

$('someRowElement').insertCell(-1).writeAttribute({ ... });

- kangax

It actually never occurred to me that I could write a wrapper
function.  My confusion is due to the fact that the code works fine in
Firefox, in that $(...).insertRow(-1) actually returns a Prototype
Element object so the chaining is nice and concise, but in IE, it does
not return an Element object, rather it appears to just return a J/S
<tr> DOM object.

I'll take a look at the addMethods method on the Element class.
Thanks for the pointer.

-a

Extending elements is a tricky business. Providing a common prototype
for element instances (which can be extended once and affect all later-
created elements) is not a standard behavior (as per ecma specs).
Mozilla happens to implement this, while IE does not. It's usually a
good idea to extend any nodes you're not sure about explicitly (in
IE).

- kangax