MooTools and Internet Explorer: Object does not support this property or method

CAUSE #1

MooTools doesn’t extend its methods to elements automatically in Internet Explorer.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ 
   document.form.status.set("value", "Success");
});
</script>
</head>
<body>
<form name="form" id="form" action="#">
   <input type="text" id="ctrl-status" name="status" value="Failure">
</form>
</body>
</html>

SOLUTION

Use dollar or document.id methods to make all Element methods accessible. In the example above, use this code instead:

$(document.form.status).set("value", "Success");

A better way would be to access element by its ID.

$("ctrl-status").set("value", "Success");

CAUSE #2

MooTools doesn’t extend its methods to some elements such as OBJECT in Internet Explorer.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ 
   $("applet").set("width", "600px");
});
</script>
</head>
<body>
   <object id="applet""></object>
</body>
</html>

SOLUTION

Create a wrapper for OBJECT element and manipulate it instead.

CAUSE #3

There is HTML form element with name that matches one of the MooTools Element methods. Error is triggered only when dollar or document.id methods are being used to get form by id.

EXAMPLE

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){ 
   var form = $("form");
});
</script>
</head>
<body>
<form name="form" id="form" action="#">
   <input type="text" id="ctrl-match" name="match" value="Failure">
</form>
</body>
</html>

SOLUTION

Change element name to something that does not conflict with names of MooTools Element methods. In the example above, change match to match-works.

You Might Also Like

Leave a Reply

You may use simple HTML to add links or lists to your comment. Also use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support language-js, language-markup and language-css for comments.
(Optional)