December 2nd, 2010

Mootools & Internet Explorer: "Object does not support this property or method"

This post shows you how to avoid the infamous “Object does not support this property or method” when using Mootools as your JavaScript library.

— Matt Fellows —

As you may or may not know, Mootools (MT) cannot extend certain elements in Internet Explorer using the $ syntax or at all. These include non-W3C standard elements such as activeX controls, <object> etc.

However, the “Object does not support this property or method” message can occur in other strange situations. From my experience, this usually comes down to the following:

  • Applying MT to non-standards compliant (X)HTML
  • Attempting to use the $ function on an element that has the same id as another element in the DOM

I’ve now found another example with forms. Take for instance the following form that I was fixing for a colleague:

            <form id="domainSearch" method="post" action="/domain-names" enctype="application/x-www-form-urlencoded">
                <input id="domain" type="text" name="domain" value="" />
                <input id="domainSubmit" class="icon_sprite" type="submit" name="send" value="Send"/>
            </form>

The following JavaScript works fine in normal browsers, but will trigger the above error in IE:

	$('domainSearch');

As far as I can tell, this is because the name and id fields have different values and IE doesn’t appreciate it. The following HTML corrects it:

            <form id="domainSearch" method="post" action="/domain-names" enctype="application/x-www-form-urlencoded">
                <input id="domain" type="text" name="domain" value="" />
                <input id="domainSubmit" class="icon_sprite" type="submit" name="domainSubmit" value="Send"/>
            </form>

Although it is recommended that the name and id attributes have the same value, it technically isn’t a standards compliance issue. This issue won’t be picked up  by those who use the Firefox HTMLTidy plugin or the W3C Validator in strict mode to detect poor compliance so this is one to look out for.

  • http://www.jtwebspace.com JT

    Thanks for the post Matt.

    I had a similar issue however my fix was slightly different.

    In my case the error was being triggered by the use of “send” as the id for my submit button.

    I can only assume that the word “send” is somehow reserved in IE and cannot be used for this purpose.

    Renaming the ID of my submit button to “submit” or anything else for that matter solved the problem and I was finally able to select the form element by ID.