noConflict jQuery – Usando 2 bibliotecas javascript [ alias $ ]

A maioria das bibliotecas javascript usam o símbolo $ como apelido das suas funções básicas.
O jQuery, disponibiliza naturalmente 2 formas de uso, com o $ e com a palavra jQuery.

Não existe conflito de jQuery + jQuery!

Se você tem um plugin que usa a lib jQuery, sei lá, um lightbox por exemplo. E depois precisa adicionar um tooltip que também usa a lib jQuery, importe apenas uma única vez a lib jQuery.

Tão simples quanto isso. Não existe conflito entre jQuery + jQuery. Apenas não importe 2 vezes a mesma lib, mesmo que em versões diferentes. Nesse caso, deixe apenas uma tag <script>, com um src para a lib, acima de todos os outros recursos(prefira usar sempre versões mais recentes), e pronto.

O método .noConflict(), existe para conflitos entre bibliotecas javascript diferentes, como Prototype + jQuery, jQuery + MooTools..

Como funciona o jQuery.noConflict() ?

	noConflict: function( deep ) {
		if ( window.$ === jQuery ) {
			window.$ = _$;
		}

		if ( deep && window.jQuery === jQuery ) {
			window.jQuery = _jQuery;
		}

		return jQuery;
	},

Note que a única coisa que esse método faz, é retornar, um objeto jQuery existente(já registrado no documento). Por isso, que a forma de usar, nos induz a ‘trocar o nome’ do apelido:

var $a = jQuery.noConflict()

E então, em vez de usar $, agora passo a usar $a

$a(document).ready(function(){

$(“bla bla bla”) is null

Esse é o erro que aparecerá, caso vc tente primeiro usar jQuery, e depois prototype. Apenas a segunda lib vai funcionar, pois ela vai sobrescrever o uso do $.

Resolvendo com noConflict()

Basta atribuir o novo objeto jQuery a um outro apelido, e usar ele então:

	$a = jQuery.noConflict();
 	$a(document).ready(function() {
		$a('#gallery a').lightBox();
	});

não sou muito fãn dessa forma de resolver, pois daria o trabalho de reescrever todo o script que dependesse de jQuery.. fora que não ficou ‘intuitivo’ esse uso.

Resolvendo apenas ao não usar o apelido $

No início deste post, eu disse que a lib disponibiliza também, a variável jQuery para ser usada.

jQuery(document).ready(function() {
	jQuery('#gallery a').lightBox();
});

Portanto, se sempre que eu tiver que fazer algo com jQuery, não usar o símbolo $, mas sim a variavel jQuery, não preciso me preocupar com conflito, pois apenas a outra lib, usaria o alias $.

Resolvendo apenas passando um argumento

	ready: function( fn ) {
		// Attach the listeners
		jQuery.bindReady();

		// Add the callback
		readyList.done( fn );

		return this;
	},

Esse é o trecho de código da lib, responsável pelo método .ready() que usamos, para aguardar o DOM carregar.
Note que o parâmetro do método é a nossa function anônima, que expliquei no post ‘Aprendi jQuery, e agora?‘.
Oque posso fazer, é forçar um argumento $, e então me aproveitar da clousure, limitando o escopo do nosso alias:

jQuery(document).ready(function( $ ) {
	$('#gallery a').lightBox();
});

Bacana ne?! não precisei mecher em nada dentro do método .ready(), apenas iniciei ele com a variavel jQuery, e forcei a lib a me devolver o argumento $, como um objeto jQuery exclusivo desse escopo.

Usando uma função anônima auto executável

Da mesma forma que a solução acima, eu poderia ter feito uma clousure, e:

	(function( $ ){
	 	$(document).ready(function( $ ) {
			$('#gallery a').lightBox();
		});
	})(jQuery);

O parâmetro ‘para o mundo externo’ a essa anônima, é jQuery, mas dentro dela, o argumento que recebo é um $. lindo não?

Demonstração Online

É isso. Se vc conhece alguma outra forma, não entendeu, ou curtiu, comente. =)

31 Comments

  1. Muito bom. Não conhecia as duas últimas formas. Vlw!

  2. Só discordo em um ponto!
    Existe sim conflito de jQuery + jQuery!!

    às vezes você não pode retirar do projeto uma biblioteca jQuery mais antiga, e precisa adicionar plugins que utilizam a nova. O projeto ja esá em produção, é enorme, enfim… impossível atualizar tudo.

    Aconteceu comigo dos plugins estarem na mesma página (jQuery antigo + jQuery novo)

    A solução foi usar o noConflict() da seguinte maneira:
    incluir jQuery novo
    usar o noConflict()
    incluir o jQuery antigo

    assim o jQuery novo passa a ser chamado por um ALIAS diferente e o antigo continua sendo chamado normalmente.

    • Ai na minha opinião, não é “conflito”, mas sim incompabilidade de versões =)
      Passei por isso recentemente.. num site com milhões de visitas.. fiz o upgrade progressivamente.

      Bem criativa a sua saída, e confesso que não tinha me passado pela cabeça usar dessa forma.

  3. Olá, estou com um problema parecido, mas não consegui resolver (ou não soube) com jQuery.noConflict().
    tenho um menu que ao clicar chama o conteudo por makerequest() (tentei tbm com load() do jquery, mas makerequest funcinou com mais sucesso) para uma div. as duas opções chama o conteudo, porém em alguns links tenho o flexigrid que utiliza jquery, json (que acredito usar ajax junto). no chrome sempre funciona, no FF só funcionou com makerequest, e no IE da um erro de javascript no js do flexigrid e carrega as informações na tela mas com o grid sem css, sem formatções, etc Alguma idéia de como resolver ?
    já tentei function para xml testando o browser. e mais algumas coisas que só me deram dor de cabeça

  4. complementando, a impressão que tenho é que seja um conflito do ajax do make request com o ajax do flexigrid (é possivel ?) e make resquest nao usa $ ou simbolos de jquery, por isso o noconflict nao me resolveu

  5. hunn pode dar certo da maneira que mostrasse no outro tópico, mas acabei tentando umas gambiarras nesse meio tempo e consegui resolver simplementes declarando o css do flexigrid denovo na pagina pai. deixando nas duas carrega perfeito no IE, e nos outros brownser continua normal. Por enquanto ta resolvido, quando der tempo pra ajustes eu tento aplicar aquela solução do outro tópico pra ficar tudo “nas regras”
    valeu a atenção
    abraço

  6. Brunão… estou tendo sérios problemas em usar muita coisa junta porém necessária.

    Estou usando

    São 3 efeitos distintos finais, um menu tolltip com slider, um jcarousel no fim da pagina e um ligthbox especial para imagens… mas ou ligth não funfa… pode me ajudar?

    Já tentei inumeras mudanças…
    O que pode ser… se habilita…? rs

    • Então cara.. vc leu o tutorial ?

      Quais libs vc está usando ? tudo oque vc precisa saber, está nesse tutorial.. se vc aplicar oque escrevi nele, vc resolve.
      []s!

  7. Tentei postar junto ao meu comentário mas como é tag acho que não foi… Tentei seguir o tuto acima de várias formas.. porém sem sucesso.
    http://www.dinamusseguros.com.br/novo/ler1.php?cod=11 a lib do menu, e do carousel no fim do site funcionam perfeito mas a do botão enviar que deveria abrir o ligthbox não carrega por completo… lá vc poderá ver na integra…

  8. Éh, depois de tentativas frustradas de geitos e arrumações ou possíveis gambiarras, nada fez o bixo funcionar mesmo, ai quando coloquei o fancybox foi de boa… que pena, o outro tinha muitas vatagens sobre o fancy. Mas de qualquer forma mutíssimo obrigado pela ajuda, valeu mesmo!

  9. Muitiiiissssimo Obrigado… Passei um dia inteiro tentando fazer essa porra (perdoe meu francês) funcionar… Bastou eu trocar uma série de dólar por jQuery e a mágica funcionou!

    Grande abraço,

  10. Boa tarde, estou tentando utilizar o NoConflict, mas esta difícil.

    Em meu site, estou usando 4 plugins jquery, um scrollTo, o Fancybox, um slider e o Quicksand.

    Chamando a ultima versão do jquery 1.7.2, os 3 primeiros plugins funcionam, mas se chamo o arquivo jquery.js do quicksand eles param de funcionar, e somente o quicksand funciona.

    Não entendi muito bem como fazer com o NoConflict, já que tenho vários plugins. Poderia me ajudar?

    • No seu caso, vc está usando jQuery + jQuery.
      Então vc não tem um caso para usar noConflict(), apenas chame todos os plugins, e um único arquivo jquery.js para todos.

      o noConflict() existe para usar libs diferentes, oque não é o teu caso.

      • Muito obrigado, eu já tinha feito o que tu falou, mas não funcionou, então tentei tirar o type=”text/javascript” do código e funcionou. =D

        Valeu e parabéns pelo site.

  11. cara por favor me ajude a resolver esses conflitos nao entendi muito as explicaçoes sou um pouco loigo

    <meta http-equiv="Content-Type" content="getContentType() ?>" />
    getTitle() ?>
    
    <meta name="description" content="getDescription()) ?>" />
    <meta name="keywords" content="getKeywords()) ?>" />
    <meta name="robots" content="getRobots()) ?>" />
    <link rel="icon" href="getFaviconFile(); ?>" type="image/x-icon" />
    <link rel="shortcut icon" href="getFaviconFile(); ?>" type="image/x-icon" />
    
    
    //<![CDATA[
        var BLANK_URL = 'helper('core/js')->getJsUrl('blank.html') ?>';
        var BLANK_IMG = 'helper('core/js')->getJsUrl('spacer.gif') ?>';
    //]]>
    
    getCssJsHtml() ?>
    getChildHtml() ?>
    helper('core/js')->getTranslatorScript() ?>
    getIncludes() ?>
      
      
      
    		var j = jQuery.noConflict();
    		j(function(){
    		j("#slideContent").cycle({
    		fx:    'scrollLeft,fade', 
    		pager : '#pager',
    		timeout: 5000,
    		cleartypeNoBg :  true,
    		cleartype : true
    		});	
    	 });
    	   
      
    
      ;
    		 (function($) { 	$(document).ready(function(){
    				$("#galeria-de-fotos .container").jCarouselLite({
    					auto:4000,
    					scroll: 2,
    					speed: 1000,	
    					visible: 5,
    					start: 0,
    					circular: false,
    					btnPrev: "#previous_button",
    					btnNext: "#next_button"
    				});
    			})})(jQuery)	
    
           
    window.___gcfg = {lang: 'pt-br'};
    (function() 
    {var po = document.createElement("script");
    po.type = "text/javascript"; po.async = true;po.src = "https://apis.google.com/js/plusone.js";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(po, s);
    })();
    
    • vc ta usando jQuery + JQuery, então vc não tem nenhum problema de conflito.
      apenas importe a lib jQuery uma unica vez. Leia novamente, até entender. Não tem nada que eu possa te dizer aqui, que já não esteja escrito no texto. =)

      boa sorte.

  12. Adilson Rumão

    agosto 25, 2012 at 15:17

    Olá Bruno conheci seu Site esta semana, se possível me tira uma dúvida.

    Estou tentando usar em um site o jCarouselLite em 3 divs diferentes e na mesma página.
    Tipo:

    Só que hora roda no FF hora não e no IE e Chrome não roda de jeito nenhum.
    Carrego os js no index.php

    Arquivo cycle_function

    $(function() {
        $("#shopping .shop").jCarouselLite({
    		auto: 9000,
            speed: 1000,
    		visible: 1,
        });
    });
    
    $(function() {
        $("#box_produtos .prod").jCarouselLite({
    		auto: 9000,
            speed: 1000,
    		visible: 1,
        });
    });
    
    $(function() {
        $("#box_servicos .serv").jCarouselLite({
    		auto: 9000,
            speed: 1000,
    		visible: 1,
        });
    });
    

    Se puder dar uma luz agradeço.

    • Já vi seu erro amigo, deixe assim:

      $(function() {
          $("#shopping .shop").jCarouselLite({
      		auto: 9000,
             	 	speed: 1000,
      		visible: 1
          });
          $("#box_produtos .prod").jCarouselLite({
      		auto: 9000,
              	speed: 1000,
      		visible: 1
          });
          $("#box_servicos .serv").jCarouselLite({
      		auto: 9000,
             		speed: 1000,
      		visible: 1
          });
      });

      Ai vai funcionar.

  13. Adilson Rumão

    agosto 31, 2012 at 12:56

    Olá obrigado por tentar ajudar, fiz como você orienteou, mas não resolveu.

    Se pouder dá uma olhada neste link para ter uma idéia:
    http://adilsonrumao.com/carousel/

    Subi ele só para teste mesmo.

  14. Adilson Rumão

    agosto 31, 2012 at 13:17

    Cara to achando que o problema aqui é de BIOS mesmo, deixa eu dar uma melhorada aqui no meu css.

  15. Véi, Vc é o cara!!!

  16. Estou com uma puta bucha que acredito ser jquery + jquery. Utilizo o Joomla e nunca travei em nada, mas estou a uns 15 dias tentando resolver, já não estou conseguindo dormir.

    Estou desenvolvendo um site para imobiliaria em cima do Virtuemart, ele utiliza o fancybox para as imagens, até ai normal, quando apliquei o phocagallery slide show no topo do site, ele cortou o fancybox, o engraçado é que na home os dois funcionam juntos sem problemas, mas quando clico em Detalhes do Imóvel e ele redireciona para uma pagina com tais detalhes a função fancybox para de funcionar, eu já estudei toda a documentação e tentei aplicar as dicas do post, mas não tive sucesso. Se alguem puder me ajudar….agradeço muito. A documentação esta no google docs: https://accounts.google.com/ServiceLogin?service=writely&passive=1209600&continue=http://docs.google.com/?hl%3Dpt_BR%26pli%3D1%23&followup=http://docs.google.com/?hl%3Dpt_BR%26pli%3D1&ltmpl=homepage&hl=pt_BR
    Usuario: ftp1200 / Senha: senhaftp1200

  17. Leandro dos Santos Moquiuti

    março 27, 2013 at 12:54

    Ótimo Post, muito bem explicativo, porem meu problema persiste, por gentileza caso saiba como resolver esse problema me ajude.

    The Current Version of jQuery:1,5,2
    Please update your jQuery Version to min. 1.7 in Case you wish to use the Revolution Slider Plugin

  18. Fala William, blz?
    Você poderia me tirar uma dúvida?

    Tenho um sistema de pesquisa instantânea que usa o jquery 1.4.2 + jquery ui 1.8.2

    Se eu tento utilizar a última versão do jquery o sistema não funciona… mas eu preciso da última versão para poder utilizar o lightbox… alguma luz de como resolver?

    Muito obrigado pela ajuda. (aqui, e lá no fórum do imasters onde eu sempre vejo teus posts hehe)

    Abraço

  19. Olá ,
    Estou com problemas de conflito em uma janela modal da minha loja virtual e não sabemos resolver. A plataforma é magento – versão magento go.
    Alguém executa este tipo de trabalho?
    Bruno, se puder nos ajudar, por favor, entre em contato. (procurei algum email de contato e não encontrei)
    Obrigada!

  20. Olá Willian,
    Tenho uma aplicação Richfaces que já carrega um jQuery 1.3.2, mas é uma versão personalizada.
    Estou adicionando o Bootstrap ao projeto e no geral (css) funciona bem, mas os eventos javascript não funcionam completamente bem.
    o codigo ta assim :
    no head tenho

    e no fim do projeto:

    jQuery.noConflict();

    mas quando clico nos botoes do menu a opção desaparece.

  21. Boa tarde willian!

    Estou com um problema aqui a tempo e não consigo solucionar, pode me dar uma dica.

Deixe uma resposta

Your email address will not be published.

*

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>