Diego Di Camillo

Base de tips para problemas comunes de los desarrolladores.



Jquery noConflict | evitar conflicto $ Jquery | compatibilidad Jquery y Prototype

11Mar10

Gracias a SAN JQUERY han colocado una función de compatibilidad para la función $(…) está disponible en Jquery desde la versión 1.0

Como usarlo, es simple:



......

 

Lo que hice es activar la propiedad noConflict y luego los $(..) son reemplazados por Jquery(…) EN TODOS LADOS DONDE APAREZCA.
Eso hace que los $(…) de prototype no entren en conflicto con los $(…) de Jquery porque simplemente estos ultimos ya no están más, han sido reemplazados por Jquery(….)

Tambien es posible asignar el objeto Jquery.noConflict() a una variable y utilizar esta variable:


......

 

Personalmente me simplificó mucho el desarrollo de paginas que debían incluir estas dos librerías.

Archivado en: General, HTML, Javascript, Web 2.0   |  37 Comentarios

37 comentarios a “Jquery noConflict | evitar conflicto $ Jquery | compatibilidad Jquery y Prototype”  

Feed de este artículo URI para Trackbacks
  1. 1 pablo en Ago 26th, 2010 dijo:

    Muchas gracias, llevaba un buen rato buscando como aplicar el no conflict.

    saludos!

  2. 2 ddicami en Ago 26th, 2010 dijo:

    De nada.
    Estoy buscando si Mootools tiene una directiva como esta para sortear incompatibilidades con prototype o jquery

  3. 3 antonp en Ene 5th, 2011 dijo:

    Buenas, tengo el problema de la compatibilidad con Prototype, pero pongo el jQuery.noConflict(); y me da el error de que ‘JQuery is not defined’

    ¿que me puede estar pasando?

  4. 4 ddicami en Ene 6th, 2011 dijo:

    Hola comprobá si :

    está definido antes de que pongas :

    jQuery.noConflict();

    Y de que, obviamente la ruta a jquery sea válida, es decir el archivo jquery.js exista.

  5. 5 alfredo en Abr 20th, 2011 dijo:

    Hola Diego, muy buena la información. Pero no consigo hacerlo funcionar. ¿Sabes que es lo que hago mal?

    jQuery.noConflict();
    jQuery(document).ready(function(){
    // Code that uses jQuery’s $ can follow here.
    bannerRotator(‘#bannerRotator’, 500, 1000);
    });

  6. 6 ddicami en Abr 20th, 2011 dijo:

    Hola , como estas, todos los codigos jquery que uses se debe reemplazar los $ por jQuery

    revisa el plugin bannerRotator.js

    y hace el reemplazo.

  7. 7 manu en Jun 30th, 2011 dijo:

    gracias loko..!

  8. 8 Cueto en Ago 1st, 2011 dijo:

    saludos…

    gracias.. a mi me funciono para el jquery.columnmanager.js

    chalee ya keria cambiar todo mi setvlet….

  9. 9 Rafael en Ago 7th, 2011 dijo:

    Genial la solución, estuvo perfecta para mi problema.

  10. 10 Hernan Godoy en Sep 13th, 2011 dijo:

    biennnnnnnnn me salvaste…!!!!! funciono de 10!

  11. 11 Pablo en Sep 14th, 2011 dijo:

    Muchas graciassssssssssssss!!!! Pero ojo, se sustituye por jQuery, no Jquery, puede dar lugar a problemas.

    Un saludooooooo

  12. 12 jesus en Oct 20th, 2011 dijo:

    excelente!!!! me sirvio bastante para el proyecto que estoy diseñando, muchas gracias!!!

  13. 13 isamichita en Oct 26th, 2011 dijo:

    muchas gracias por el post, me vino de lujo! Un saludo

  14. 14 jose en Nov 4th, 2011 dijo:

    i love youuuu man!!
    hehe

    te lo agradesco muchisimo!

    exitos y bendiciones para ti y tu familia

  15. 15 cesar en Nov 23rd, 2011 dijo:

    Hola!!!
    lo q pasa es q no me sale me sigue saliendo error de un archivo (window.js), tengo este codigo no se si estoy colocando algo mal o q depronto es una bobada pero no doy??
    gracias!!!

    var j = jquery.noConflict();
    j(document).ready(function(){
    j(«#window»).interface({
    numeric: true,
    continuous: true,
    auto: true,
    speed: 1200,
    pause: 6000
    });
    });

  16. 16 ddicami en Nov 23rd, 2011 dijo:

    Probar con::

    var j = jQuery.noConflict();

    la Q en mayúscula

  17. 17 Hola en Nov 24th, 2011 dijo:

    Hola tengo un problema, al cargar un juego..

    me sale que Jquery no esta definido

    quisiera saber como definirlo y repararlo

    pues no me permite entrar a esa aplicacion

  18. 18 Hola en Nov 24th, 2011 dijo:

    Gracias de antemano

  19. 19 ddicami en Nov 25th, 2011 dijo:

    si la aplicacion es Web. Verifica si se incluye jquery.js en el

    Verifica que este el archivo js, sino subilo por FTP al servidor.

  20. 20 robertin_ en Nov 25th, 2011 dijo:

    nice code, men!!!

  21. 21 gerMonti en Nov 25th, 2011 dijo:

    Gracias por la info
    yo solo puse

    var j = jQuery.noConflict();

    y se me acabaron los problemas que yo tenía aunque no se bien porque eran, gracias por el aporte

  22. 22 Angel en Dic 27th, 2011 dijo:

    Muchas Gracias, ya no hallaba la puerta con este problema, me daban conflicto dos archivos jQuery, en 1 de los dos solo reemplace los signos $ por la palabra «jQuery» y LISTOOOOOOOO !!!!!!
    ya quedo. Gracias bye

  23. 23 daniel en Ene 3rd, 2013 dijo:

    clearslider y simplemodal aun en conflicto, algo mas avanzado del noClonflict?

  24. 24 ddicami en Ene 7th, 2013 dijo:

    Jquery es quien proporciona el metodo noConflict, y lo que hace es reemplazar el $ por otro caracter.
    Si esos plugins que mencionas estan en conflicto, noConflict no arregla nada. deberias revisar nombres de variables y metodos para que no se pisen…. linda tarea de verano….

  25. 25 Silvia en Ene 15th, 2013 dijo:

    Hola! me parece muy interesante y quiero probar. Tengo una web en la que me entran en conflicto 2 sliders.

    Una pregunta. El script que propones se pega al principio de los archivos .js, y luego se sustituyen los simbolos del dolar?

  26. 26 Sergio en Ene 25th, 2013 dijo:

    Llevo todo el día con un problema de incompatibilidad y gracias a este post lo he conseguido solucionar. Si cambiaba $ por jQuery no funcionaba…al final he seguido esta instrucción que has dado:
    «Tambien es posible asignar el objeto Jquery.noConflict() a una variable y utilizar esta variable:»

    y funcionó!!!

    GRACIAAAAAAAS

  27. 27 ddicami en Ene 25th, 2013 dijo:

    Me haces sentir como un super heroe!

  28. 28 Nuria en Mar 18th, 2013 dijo:

    Esto ha solucinado en parte mi problema ya que ahora el slide que no funcionaba al menso aparece aunque no funciona del todo correctamente.

    ¿Qué $ hay que cambiar por la variable que le des al jQuery?? ¿sólo las que están en head? o las que están en los .js correspondientes?. Gracias!

  29. 29 ddicami en Mar 18th, 2013 dijo:

    Todos los $ del head y de las librerias js jquery deben ser reemplazadas por jQuery

    Verifica que se cargue el CSS de tu slide!!!!

  30. 30 Nuria en Mar 18th, 2013 dijo:

    Gracias! tengo que usar una variable en vez de jQuery ya que con esto no funciona. He cambiado los $ por esa variable en todos las librerias y aún así sigue funcionando en parte. He verificado el css y verificaré los js tb pero no sé donde puede estar el fallo.

  31. 31 robert mendoza en Mar 23rd, 2013 dijo:

    buenas noches me pasa un problema similar aunque las librerías que utilizo

    flexslider
    jquery.flexslider.js
    shCore.js
    shBrushXml.js
    shBrushJScript.js

    son para un slides entre ellas funcionan perfectamente
    pero en el mismo proyecto necesito crear un formulario emergente buscando en internet me encontre este

    http://dissenyaweb.com/blog/diseno_web/como-hacer-un-pop-up-elegante-con-html-javascript-jquery-de-twitter-bootstrap-ventana-emergente-modal-frame/

    y asi funciona
    http://dissenyaweb.com/blog/diseno_web/ejemplo_popup/
    pero cuando lo coloco en mi html verificando que esten en el servidor las librerias
    y todo
    me lo muestr el boton pero no se activa e intenado pero no he podido no encuentro la forma por que el slider si sige funcionando normal

  32. 32 robert mendoza en Mar 23rd, 2013 dijo:

    buenas noches me pasa un problema similar aunque las librerías que utilizo

    flexslider
    jquery.flexslider.js
    shCore.js
    shBrushXml.js
    shBrushJScript.js

    son para un slides entre ellas funcionan perfectamente
    pero en el mismo proyecto necesito crear un formulario emergente buscando en internet me encontre este

    http://dissenyaweb.com/blog/diseno_web/como-hacer-un-pop-up-elegante-con-html-javascript-jquery-de-twitter-bootstrap-ventana-emergente-modal-frame/

    y asi funciona
    http://dissenyaweb.com/blog/diseno_web/ejemplo_popup/
    pero cuando lo coloco en mi html verificando que esten en el servidor las librerias
    y todo
    me lo muestr el boton pero no se activa e intenado pero no he podido no encuentro la forma por que el slider si sige funcionando normal
    yo lo cambiado pero nada funciona ni la variable

  33. 33 robert mendoza en Mar 23rd, 2013 dijo:

    este es el script modificado pero no no me funciona y solo lo modifico sin colocarlo en mi html y
    aparece opaca la pantalla perp no se activa la ventana gracias si me pueden ayudar agradeceria

    var cyc = jQuery.noConflict();
    var type =
    cyc(document).ready(function() {

    cyc(‘.button’).click(function() {

    type = cyc(this).attr(‘data-type’);

    cyc(‘.overlay-container’).fadeIn(function() {

    window.setTimeout(function(){
    $(‘.window-container.’+type).addClass(‘window-container-visible’);
    }, 100);

    });
    });

    cyc(‘.close’).click(function() {
    cyc(‘.overlay-container’).fadeOut().end().find(‘.window-container’).removeClass(‘window-container-visible’);
    });

    });

  34. 34 Paola en Feb 4th, 2016 dijo:

    tengo un problema, mi menú se encima con una función que esta en jquery y menú esta en JavaScript, como le puedo hacer para que sean compatibles

  35. 35 Claudia en Jun 16th, 2016 dijo:

    Tengo 2 códigos jquery. Uno me permite abrir imágenes en la misma página, es decir al hacer click sobre la imagen se abre más grande sobre si. El otro código jquery es de un slider de imágenes. Cuando lo coloco, el primer código deja de funcionar.
    estos son los dos códigos:

    1.

    var j = jQuery.noConflict();
    jQuery(function() {
    jQuery(‘#gallery a’).lightBox();
    });

    El segundo código es:

    2.

    $(window).load(function() {
    $(‘#slider’).nivoSlider();
    });

    si a este código le coloco el var j = jQuery.noConflict(); deja de funcionar.

    Busco una solución para que los dos códigos me funcionen, Gracias.

  36. 36 ddicami en Jun 16th, 2016 dijo:

    Hola, porque si pones:

    var j = jQuery.noConflict();

    Debería ser:

    j(function() {
    j(‘#gallery a’).lightBox();
    });

  1. 1 My Page Madafaka » Blog Archive » Jquery noConflict | evitar conflicto $ Jquery | compatibilidad Jquery y Prototype
Enviando tu Comentario
Por favor espera

Deja una respuesta

Hubo un error con tu comentario, por favor intenta de nuevo.



Comparte este artículo

  • Menéame  Menéalo
  • del.icio.us  Enviar a Del.icio.us
  • Mi Yahoo!  Agregar a Mi Web 2.0
  • Furl  Guardar en Furl
 


wordpressk2openswitchyukei.netfeedwordpress