Trabalhando com jQuery e MooTools ao mesmo tempo 10


jQuery & MooToolsHoje estava a melhorar a área de administração para o portal de um cliente que será brevemente lançado, e deparei-me com o problema… Tinha um plugin desenvolvido em jQuery e outro em MooTools que queria ver integrado na mesma página.

Explicação do Porquê do Erro Acontecer

O símbolo ‘$’ é usado como objecto pela jQuery e também pela MooTools, logo existe interferência.

Se chamarmos primeiro a jQuery ela vai correr e criar um objecto chamado ‘$’ com as funções especificas para jQuery, de seguida, chamamos a MooTools que vai criar o seu o objecto também chamado ‘$’ com as funções especificas da MooTools.

A Solução

Depois de alguma pesquisa consegui solucionar o problema e ter os dois a funcionar correctamente no mesmo local, apesar da solução mais vista: jQuery.noConflict(); não funcionar no meu caso.

A solução passou por pegar nos ficheiros de funções jQuery e alterar todos os ‘$’ para ‘jQuery’, porque é a mesma coisa chamar uma função através do objecto ‘$’ quer através do objecto ‘jQuery’, pois o objecto ‘$’ é apenas um shortcut para ‘jQuery’.

Depois a ordem que utilizei para chamar as bibliotecas em si foi a jQuery primeiro e de seguida a MooTools.


Leave a Reply

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

10 thoughts on “Trabalhando com jQuery e MooTools ao mesmo tempo

  • Bruno Bernardino

    Não é necessário substituir $ por jQuery em todo o lado, só nas chamadas “de raíz”, por exemplo, se tiveres:


    $(document).ready(function() {
    $('#loading').fadeIn('fast');
    });

    Podes substituir por:


    jQuery(document).ready(function($)) {
    $('#loading').fadeIn('fast);
    });

    Pois dentro da função do jQuery o parâmetro que é passado é o próprio jQuery, que, se passares como $, fica com o funcionamento esperado antes do mootools 🙂

  • Gonçalo

    Porque não utilizar uma só framework? Utilizar duas é dar um tiro no pé a nível profissional….

    reprogramava-se o plugin… ou procurava-se equivalente…

    • João Pedro Pereira Post author

      O plugin que eu queria, e tinha em MooTools, não encontrei equivalente em jQuery e como não tinha tempo para desenvolver uma coisa nova foi a melhor opção que me ocorreu, mas claro que quanto menos coisas misturarmos melhor :).

      Obrigado pela sua participação Gonçalo :)!

  • jean paul

    Pois é amiguinhos eu me matei para fazer um script de zoom jquery e MooTools funcionarem no site e a solução era mais fácil do que eu havia pensado …

    Obrigado pela dica

    jQuery(document).ready(function(){

    //Larger thumbnail preview

    jQuery(“ul.thumb li”).hover(function() {
    jQuery(this).css({‘z-index’ : ’10’});
    jQuery(this).find(‘img’).addClass(“hover”).stop()
    .animate({
    marginTop: ‘-110px’,
    marginLeft: ‘-110px’,
    top: ‘50%’,
    left: ‘50%’,
    width: ‘130px’,
    height: ‘130px’,
    padding: ’20px’
    }, 300);

    } , function() {
    jQuery(this).css({‘z-index’ : ‘0’});
    jQuery(this).find(‘img’).removeClass(“hover”).stop()
    .animate({
    marginTop: ‘0’,
    marginLeft: ‘0’,
    top: ‘0’,
    left: ‘0’,
    width: ’50px’,
    height: ’50px’,
    padding: ‘5px’
    }, 100);
    });

    });

    Estava usando o tal Query.noConflict(); e voltava do MooTools $ is not a function e não carregava a galeria …

    Abraço

  • Kadu Baier

    Cara, parabéns velho, faz umas 8 horas que tava tentando resolver este problema, mas nenhum geito dava certo,

    Depois achei esse teu TUTO, e na hora problema resolvido ;O
    valeu.