Search code examples
javascriptjquerymootools

mootools and jQuery conflict

I've got a simple form in a page that is loading Mootools and JQuery. JQuery is in no conflict mode, which seems like it ought to cause no problems.

There's a form element called "name"--

<input class="required" id="sendname" name="sendname" value="">

And I'm trying to attach a click event to it using Mootools to update something else when the name box is clicked:

$('sendname').addEvent('click', function(e){
    // do stuff.
});

The problem is that the click event never gets added.

This error appears on load:

Uncaught TypeError: Cannot call method 'addEvent' of null

When I try to interact with the element in a js console, I get the following error:

> $('sendname').setProperty('value', 'test');
TypeError: Object sendname has no method 'setProperty'</strike>

EDIT: the previous was fixed by loading a newer Mootools. However, the click event still isn't functioning properly, though it throws no errors or warning.

This code works fine in almost any situation I've used it in. I assume there's some issue with jQuery conflicting, but the fact that the $ notation works seems to confirm that noConflict mode is operational. Any ideas?

Solution

  • As described in the comments to the OP, the issue was the load-order of the jQuery/Mootools scripts. The jQuery noConflict was being loaded too late, and causing problems. Please see jsfiddle -- http://jsfiddle.net/uSwzL/1/