Hoje 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.
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 🙂
Pois, bem visto Bruno, de facto não tinha pensado nisso.
Obrigado pelo contributo :).
Solução perfeita! Muito obrigado pela sua contribuição!
Abraço
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…
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 :)!
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
valew pela dica, quebro um galhaçooooo..
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.
Boa solução!
Obrigado!