How to avoid conflict between jQuery and Mootools

Asked

Viewed 531 times

7

Good practices to avoid conflicts between jQuery and Mootools libraries?

This example makes the mistake Uncaught TypeError: Object [object Object] has no method 'fade'

//codigo Mootools
$('sobreCamada').fade('in');

//codigo jQuery
setTimeout(function () {
    $('#sobreCamada').fadeIn().delay(1000).fadeOut(function () {
        $(this).remove()
    });
}, 2000);
jquery mootools
  • 2

    I work a lot with Mootools and I know that there is little documentation on this issue in Portuguese, hence the question-answer.

  • Since the question has little content, the system signals the same for review for this reason. I suggested to apply one or other common error resulting from the said conflict. This way the question has some code and content. On the other hand, it is interesting so that in the future those who come across this problem without knowing that it is a matter of conflict, through the mistakes in the question, will be able to associate and see the answer :)

  • @Zuul, you’re right. I added an example. Thank you.

2 answers

10


Since both Mootools, jQuery (and even Prototype) use the dollar $, dollar is the problem that needs to be solved and the source of conflict between the two libraries.

mootools uses the $() to select elements by ID. So the Mootools code $('meuId') is similar to the jQuery method $('#meuId'). Mootools has an alternative to select an element by ID, using document.id('meuId');

Different options:

  • Order of loading of scripts:

Mootools detects if dollar $ is already being used and does not re-declare the function $(), so if Mootools is the last to load the problem it should disappear. In this case it should be used document.id() in Mootools as per $();

  • jQuery.noConflict()

jQuery has a method to release the dollar and enter mode of nonconflict. In practice it is even possible to use var jQ = jQuery.noConflict(); and from then on call the jQuery by jQ() instead of $() or jQuery(). The most common is to use jQuery() instead of $(), as is the case with Wordpress which loads jQuery into no conflict mode.

  • (function($){/*...*/})(jQuery)

Another option is to change the dollar Scope. Passing the dollar as a parameter of an anonymous function, this solution is practical to package existing code without having to change all the $ for jQuery. This variant also needs the declaration jQuery.noConflict().

3

To avoid conflict between these libraries you can create a closure and limit to a certain scope the variables created and defined

To do this in Javascript we use functions

function criarClosure(){
    //Aqui está definido um closure
    //E todas as variáveis estão limitadas ao escopo da função
}

So in the case of jQuery, you can create an anonymous function that is already executed

(function($){
    //Utilização padrão do jQuery
    $(document).ready(function(){
        ...
    });
})(jQuery); //Nessa linha executamos a função definida sem conflitos

On the jQuery website there is more information about this (in English)

Avoiding Conflicts with Other Libraries

Browser other questions tagged jquery mootools

You are not signed in. Login or sign up in order to post.