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 May Also Like

Leave a Reply

(optional)

This site uses Akismet to reduce spam. Learn how your comment data is processed.