Dynamic AJAX Content, Internet Explorer, MooTools, and Form Elements

Another day, another Internet Explorer bug. I was using MooTool’s Request.HTML to load some AJAX content to display within an inline popup and IE kept throwing the classic “Object doesn’t support this property or method” error. The error was occurring inside document.id (i.e. the dollar function) which made the issue even stranger. Looking at the dollar function’s source code, it seems as though methods are copied from Element.prototype to the element being retrieved.

The AJAX content I was loading contained a form which had a form element with ID “position”. When the Request.HTML receives html content it retrieves a list of all elements contained with the AJAX response using getElements(“*”). This caused the document.id method to be called with the form element of ID “position” contained within the HTML response as its argument, which caused the following assignment to be made:
[code]
theFormElement[“position”] = Element.prototype[“position”];
[/code]
Which then triggered the above mentioned IE error. Since theFormElement[“position”] is a read-only reference to the input element contained within the form IE threw an error. Be aware of the ID / name you assign to input elements when debugging obscure bugs in internet explorer!