Addressing Prototype, setStyle, Internet Explorer, “Object doesn’t support …”
While working on the latest version of Slideshow, I was working on a feature that involved dynamically creating an element, creating a text node, and ultimately setting styles on the new element. Unfortunately, IE6 and IE7 kept throwing the error “Object doesn’t support this property or method”. When searching for the bug, I had narrowed it down to the function responsible for setting the styles of this newly generated element. Initially, my code looked something like this:
this.Message = document.createElement(’div’);
var msg = document.createTextNode(’[message goes here]‘);
this.Message.appendChild(msg);
this.Message.setStyle({// styles
});
I traced the problem to the line where the styles were being set (this.Message.setStyle). The fix is pretty simple - rather than saying:
this.Message = document.createElement(’div’);
I needed to do this instead:
this.Message = $(document.createElement(’div’));
Prototype provides a ton of functionality via DOM extension; however, it on order to have an element extended, it needs to be processed via the $() utility function.
11. June 2008 at 15:17
Thanks a lot, it also needs be done when using Builder:
this._dialog = $(Builder.node(’div’));
strange.
-kerry
11. June 2008 at 15:27
Oh BTW, this is do to the fact that setStyle() is a prototype extended method. $() extends the element. Since you used a ‘native’ element creation method you did not get the extended methods. Seems like Builder would return an extended node though. No answer for the discrepancies between browsers though. Additionally you could call:
Element.extend(this.Message);
before using setStyle()
23. June 2008 at 00:43
Thanks very much. Most helpful.
8. October 2008 at 15:15
Hi Tom,
Thanks for the tip. This is an easy oversight when you are coding with the Prototype library. I had something like this:
document.forms[0].writeAttribute(”attr”,”val”)
which should have been:
$(document.forms[0]).writeAttribute(”attr”,”val”)
-Rob