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

B10f06003f178d3541627ae93ae618af?d=identicon&s=25 icfantv (Guest)
on 2008-06-17 00:20
(Received via mailing list)
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
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-17 07:32
(Received via mailing list)
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
B10f06003f178d3541627ae93ae618af?d=identicon&s=25 icfantv (Guest)
on 2008-06-17 16:40
(Received via mailing list)
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
F1fcf834ddad415f60d29c87cc10d4d4?d=identicon&s=25 kangax (Guest)
on 2008-06-17 19:15
(Received via mailing list)
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
This topic is locked and can not be replied to.