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?

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?

• javascript
• jquery
• mootools

• Another random thought: Is it critical you use both JavaScript libraries here? I'd choose Mootools OR jQuery and convert the other scripts to use same. – Sparky Commented Jun 15, 2011 at 16:48
• @Sparky672-- you're right, I'd much prefer to stick with mootools. This is not my choice however, and the client is using both in the site. – julio Commented Jun 15, 2011 at 16:58
• 1 @julio: Next step would be to post more of your relevant code, post a JSFiddle, or post a link to your page. – Sparky Commented Jun 15, 2011 at 17:04
• @julio: Also, remove all jQuery code (temporarily) just to verify that your Mootools code works as intended. – Sparky Commented Jun 15, 2011 at 17:06
• @Sparky672-- here's a fiddle for you-- jsfiddle/uSwzL/1. Looks like what was happening in my page was that the jQuery was getting loaded after the mootools code-- so the noConflict() statement was not being honored. – julio Commented Jun 15, 2011 at 17:24

4 Answers 4

You are targetting the element wrongly... I think this has nothing to do with a possible conflict.

In this case you need to add the hash for an id or a period for a class, like this:

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

Notice the # in #sendname

MooTools has Dollar Safe mode that automatically releases the $ to other libs as long as MooTools is loaded last.

If Dollar Safe mode is active, you need to use:

document.id('SomeElementID').someMethod()

What is happening in the example you are giving, is that you're using jQuery to select the element, and a MooTools method on the result. The thing is, jQuery returns the jQuery object which has no such 'addEvent' method on it. MooTools works on the actual elements so you need to select them with a MooTools query method first: $ == document.id or $$ == document.search

You can cache document.id to a var for convenience if you want:

var $M = document.id;
$M('sendname').addEvent(...)

As described in the ments 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/uSwzL/1/

Without any problem even loading jquery.js after other $ based library loaded:

<script>$=function(){alert('hell');}</script>
<script src="http://code.jquery./jquery-1.9.0.min.js"></script>
<script>
$.noConflict();
$();
alert(jQuery.trim('  hello '));
</script>

Even in php framework html template:

<script>
function on_doc_ready()
         {jQuery(function($)
                 {$( "#sortable" ).sortable();
                  $( "#sortable" ).disableSelection();
                 }
                );
         }
function load_jquery_ui()
         {var s2=document.createElement('scr'+'ipt');
          s2.setAttribute('onload', 'on_doc_ready();');
          s2.src='/app/idm/statics/jQuery/js/jquery-ui-1.10.0.custom.min.js';
          document.getElementsByTagName('head')[0].appendChild(s2);
         }
function load_jquery_after_mootools()
         {var s1=document.createElement('scr'+'ipt');
          s1.src='/app/idm/statics/jQuery/js/jquery-1.9.0.js';
          s1.setAttribute('onload', '$.noConflict();load_jquery_ui();');
          document.getElementsByTagName('head')[0].appendChild(s1);
         }
load_jquery_after_mootools();
<script>