Página Inicial > JavaScript, Programação > Conflito entre prototype.js e jquery.js

Conflito entre prototype.js e jquery.js

Bom, estou com o tempo curto aqui no trabalho, mas deixo esse post aqui para alertá-los sobre possíveis problemas que vocês podem encontrar usando aplicações web que usem o prototype.js (como o meu querido Lightbox ) junto com o meu também querido jquery.js. Por estar com pouco tempo, infelizmente não poderei me alongar nos detalhes dessas ferramentas que acho muito úteis e indispensáveis.

Mas enfim, se você chegou até aqui através do nosso amigo google, deve ser porque você está passando por esse problema agora :P

Vamos direto ao ponto. O jQuery possui um modo ‘noConflict’ para casos em que haja conflito com declarações de outras bibliotecas. Mas isso você já deve ter notado né? :P Para resolver isso, carregue o jQuery primeiro, e faça:

<script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
        jQuery.noConflict();
    </script>

Isso deverá vir antes de carregar qualquer outra biblioteca de scripts. A partir daí, você pode carregar os demais js’s, inclusive o prototype.js. Porém, não é só isso, mas calma, não vai ter nada de muito difícil. Nas chamadas ao jquery.js que usem o $, substitua esse por jQuery. Um exemplo é:

$("#conquistapg").load(url);

// Vira:

jQuery("#conquistapg").load(url);

Pronto! Agora é só isso mesmo!

Espero ter ajudado :)

Mais pra frente vou me alongar mais nessas bibliotecas bacanas.

[]‘s

Sahb,.

  1. 30, abril, 2009 em 08:58 | #1

    Você pode faer assim também:

    var $j = jQuery.noConflict();

    Agora é só usar:

    $j(“#conquistapg”).load(url);

  2. Pinguineras
    26, maio, 2009 em 19:01 | #2

    Muito foda o post, nao tive problemas ainda mas resolvi dar uma olhada primeiro.

  3. Cátia
    28, maio, 2009 em 11:44 | #3

    Nossa, muito obrigada, isso ajudou muito !!! Já estava ficando triste de ter que desistir do jQuery ou do prototype na minha página que tava dando conflito.
    Valeu!

  4. admin
    28, maio, 2009 em 12:02 | #4

    às ordens %)
    Bom ver que está sendo útil :)

  5. Marcel Pinheiro
    9, junho, 2009 em 17:24 | #5

    Amigo, ja tava ficado louco com esse problema! Muito obrigado!

  6. admin
    9, junho, 2009 em 19:00 | #6

    Bom saber que ajudou! Abraço!

  7. Luiz Fernando
    21, junho, 2009 em 10:53 | #7

    Exemplo: Tenho o jQuery e o prototype; coloco a linha “jQuery.noConflict();” e mudo os “$” em quais JS??? em todos, menos o jQuery?

  8. admin
    22, junho, 2009 em 16:49 | #8

    Você muda nas chamadas que você usa o jquery, ou seja, nos seus javascripts que o usam. Não é para alterar o jquery.js nem nada. Ok?

  9. 14, julho, 2009 em 16:12 | #9

    Isso me ajudou muito.

    Vlw

  10. Rodolfo
    22, julho, 2009 em 13:10 | #10

    Excelente tutorial.

  11. 24, julho, 2009 em 10:13 | #11

    fiz como vc falou.. mas nao abre de forma alguma nos IE
    este ai é meu codigo:

    <!–
    jQuery(document).ready(function(){
    // Hide the site-meta panel
    jQuery(‘#subacordion’).hide();
    jQuery(‘#subacordion1′).hide();
    jQuery(‘#subacordion1_1′).hide();
    jQuery(‘#subacordion2′).hide();
    jQuery(‘#subacordion3′).hide();
    // Toggle site-meta panel visibilty and class when handle is clicked
    jQuery(‘#empresa’).click(function() {
    jQuery(‘#subacordion’).slideToggle(50);
    jQuery(this).toggleClass(“active”);
    jQuery(‘#subacordion1′).hide();
    jQuery(‘#subacordion1_1′).hide();
    jQuery(‘#subacordion2′).hide();
    jQuery(‘#subacordion3′).hide();;
    return false

    } );
    jQuery(‘#produtos’).click(function() {
    jQuery(‘#subacordion1′).slideToggle(50);
    jQuery(this).toggleClass(“active”);
    jQuery(‘#subacordion’).hide();
    jQuery(‘#subacordion1_1′).hide();
    jQuery(‘#subacordion2′).hide();
    jQuery(‘#subacordion3′).hide();;
    return false;
    } );

    jQuery(‘#aeroporto’).click(function() {
    jQuery(‘#subacordion1_1′).slideToggle(50);
    jQuery(this).toggleClass(“active”);
    return false;
    } );

    jQuery(‘#redes_digitais’).click(function() {
    jQuery(‘#subacordion2′).slideToggle(50);
    jQuery(this).toggleClass(“active”);
    jQuery(‘#subacordion’).hide();
    jQuery(‘#subacordion1′).hide();

    jQuery(‘#subacordion3′).hide();;
    return false;
    } );

    jQuery(‘#solucoes_interativas’).click(function() {
    jQuery(‘#subacordion3′).slideToggle(50);
    jQuery(this).toggleClass(“active”);
    jQuery(‘#subacordion’).hide();
    jQuery(‘#subacordion1_1′).hide();
    jQuery(‘#subacordion2′).hide();
    jQuery(‘#subacordion1′).hide();;
    return false;
    } );

    });

  12. Daniel Anaissi
    28, julho, 2009 em 12:54 | #12

    Cara parabêns pela solução. Estou desenvolvendo um projeto (site) e me deparei com esse problema. Sua solução solucional meu problema. Mesmo estando corrido aqui, fiz questão de parar um minuto para parabenizar e agradecer o compartilhamento do conhecimento! Vlw.

  13. Xavier
    12, agosto, 2009 em 19:02 | #13

    Parabéns!!! Muito boa a dica..

  14. Erica
    17, fevereiro, 2010 em 21:53 | #14

    Show de bola!!!
    Funcionou perfeitamente!!!

  15. Tiago Barbosa
    22, abril, 2010 em 22:52 | #15

    Massa!!! Funfou aqui!!!

  16. sergio
    11, junho, 2010 em 14:20 | #16

    Cara show de bola, fiz como explicado e deu tudo certo.

  17. 15, junho, 2010 em 22:44 | #17

    Nossa, era o que eu estava precisando!
    Mas ainda estou com um problema, estou usando 3 elementos que utilizam jQuery, dois deles estão funcionando, o S3Slider e o Lightbox, mas o menu Fancy Navagation da conflito e fica como um menu padrão sem efeito.
    Gostaria de saber se tem uma solução para isso, pois já tentei de tudo e até agora nada :(

  18. Afrânio
    27, junho, 2010 em 08:03 | #18

    Sensacional! Me salvou colega.

  19. 5, julho, 2010 em 18:04 | #19

    Você salvou a minha vida neste momento, obrigada =D

  20. Rafael
    7, julho, 2010 em 22:28 | #20

    Você salvou minha vida agora! Muito obrigado!

  21. 21, julho, 2010 em 19:01 | #21

    eu não estou conseguindo resolver o meu problema – gostaria da ajuda dos amigos tentei o que foi passado acima mas não deu certo.

    Olá pessoal gostaria de ajuda de vcs nesse caso

    estou fazendo um site em server side include

    na pagina index eu coloquei um codigo de jquery jcarousel

    está funcionando perfeitamente

    porem no menu do lado esquerdo qdo vc clica em

    Doces, Salgados ou Outros

    vc chama a pagina galeria.php

    que tem um outro codigo do jquery que seria o lightbox

    só que dai o site vira uma bagunça

    o codigo do lightbox tipo que anula o codigo do jquery jcarousel

    o carrossel que era para ser horizontal(mostrar 7 fotos) vira vertical (mostra todas as fotos)

    eu fiz uns testes na pagina eu galeria . php eu retirei o codigo do lightbox

    ai o jquery jcarousel volta ao normal

    não dá para usar os dois?

    no meu index . php tem esse codigo

    $(function(){

    $(“.carosel”).jCarouselLite({
    btnNext: “.next”,
    btnPrev: “.prev”,
    visible: 7,
    auto: 7500,
    speedy: 2000,
    align: “center”

    })

    })

    e no meu galeria . php tem esse codigo

    o site é esse

    sianisalgados.com

    vlw pessoal

  22. 21, julho, 2010 em 19:06 | #22

    no index tem esse script acima do function

    e na galeria tem esse

  23. 21, julho, 2010 em 19:23 | #23

    vlw pessoal deu certo com o codigo acima sim, eu que tinha cometido um erro.

  24. Yan patrick
    4, agosto, 2010 em 00:28 | #24

    kara eu fiz o q vcs falaram ae mas mesmo assim ainda nao consegui resolver meu problema, eu estou usando um script q se chama jq-corner.js para arredondar tabelas e to usando o light box, e to tentando carregar os 2 na mesma pagina, por exemplo “fotos” e talz, mas nao da, eu fiz tudo isso ae q vc falo pra fazer, e consigo arredondar as bordas mas as fotos abrem como uma nova pagina e nao no lightbox, o q eu posso fazer? to desesperado… valeu abraços

  25. admin
    4, agosto, 2010 em 10:51 | #25

    Bom, se você fez tudo que está no post, inclusive mudar as chamadas $( para jQuery(, ai tem que ver se tem mais algum conflito. Se você tiver o firebug instalado no seu firefox você poderá saber melhor que tipo de erros está tendo, o console do javascript de qualquer navegador vai pelo menos te avisar se o problema está em algum script seu ou se é esse jq-corner (que nunca mexi :P ) que precisa usar os jQuery(.
    Dê uma checada nos erros que você terá uma melhor idéia do que está acontecendo. Se continuar tendo problemas, descreva os erros que tentaremos te ajudar.

    Abraço,

    Sahb,.

  26. Geórgia Nunes
    16, setembro, 2010 em 10:43 | #26

    Velho, vc eh o cara!!

    Super funcionou!!!
    E eu já tava quase desistindo…mas Graças a vc consegui solucionar esse conflito!!

    \o/

    Muito muito obrigada!!!

    =D

  27. 14, novembro, 2010 em 15:42 | #27

    Cara, não sei de onde vc saiu, mas valeu a pena visitar seu blog… obrigado!!!

  28. Luiz Paulo Monteiro
    19, dezembro, 2010 em 21:16 | #28

    Valeu amigo,

    resolveu tbm minha bronca!

    abraços

  29. 17, janeiro, 2011 em 15:58 | #29

    Cara, muito obrigado mesmo!
    Fiquei horas e horas tentando resolver e graças a Deus encontrei seu blog e aprendi como solucionar esse problema. Mais uma vez, muito obrigado e parabens pelo blog!
    Abraco

  30. 5, abril, 2011 em 14:46 | #30

    cara eu não sou de comentar em post, mas nesse aqui vou ter que deixar meu obrigado…rsrsrs
    depois de 3hs de estudo inclusive no site do jquery problema resolvido, claro aqui no seu site. valeu.

  31. David
    3, maio, 2011 em 12:44 | #31

    Fiz tudo certinho, não deu certo. Não sei o que aconteceu!

  32. David
    3, maio, 2011 em 12:49 | #32

    ainda continuo com o problema. talvez ainda não sei onde colocar a tag no.conflict();
    entrei no arquivojquery.js e coloquei $j , em todas que estavam só assim $.

  33. dimitrius
    5, maio, 2011 em 15:20 | #33

    Cara, valeu. Funcionou de primeira. Muito obrigado por compartilhar. Parabéns pelo Blog.

  34. 18, julho, 2011 em 11:46 | #34

    Vim engrossar os comentários aqui no teu blog referentes à grande utilidade dessa postagem. Depois de exatas 6 horas pregado no computador tentando resolver problemas de conflitos e outros com jQuery eu consegui! Muito obrigado pela dica preciosa!

  35. Cibele
    1, agosto, 2011 em 16:38 | #35

    MUITO BOM!

    wlw cara!

    Abs!

  36. Samuel dos Santos
    17, agosto, 2011 em 01:05 | #36

    Cara vlw msm, a muito tempo corro atrás disso.
    Show de bola. Até o no IE funciona, olha só isso =)
    Abraço

  37. Garateia
    21, outubro, 2011 em 12:38 | #37

    Cara, muito bom, resolvi meo problema, vlw !!!

  38. 4, dezembro, 2011 em 11:11 | #38

    Cara, desde ontem to atras dessa solução! valeu mesmo! Ajudou demais… (y)

  39. Joaquim
    29, dezembro, 2011 em 06:49 | #39

    Estou com um problema. Está dando conflito quando uso o Jqzoom e o Light box, só funciona um dos dois. Queria saber se tem como fazer os dois rodarem e corrigir este conflito?

  40. William
    5, abril, 2012 em 11:53 | #40

    Muito obrigado,

    resolveu meu problema também!

    Abraço.

  41. Cássio
    10, abril, 2012 em 13:12 | #41

    Cara, valeu mesmo!

    Tava há dias tentando resolver esse problema.

    Abraço.

  1. Nenhum trackback ainda.