Como evitar conflictos entre Mootools y jQuery

No sé a vosotros, pero a mí trabajar con frameworks me facilita mucho la cosa, ya que no sé mucho de javascript y puedo lograr bonitos efectos sin tener que invertir mucho tiempo.

El último trabajo que he realizado con frameworks de javascript ha sido en el diseño de este blog.

WordPress utiliza jQuery para algunas funciones, y yo personalmente prefiero Mootools. Esta vez he decidido usar ambos, y el principal problema que he encontrado han sido los conflictos entre ambos.

Para evitar tener que usar solo un frameworks, podemos recurrir a una función que nos permitirá usar ambos, la función jQuery.noConflict().

¿Qué hace esta función? Hace que en lugar de usar el caracter $ en las funciones, usemos jQuery, evitando así los conflictos entre ambos frameworks.

Un ejemplo: Si antes teníamos este código javascript (obviamente incompatible con Mootools):

$(document).ready(function(){
$(".btn-slide").click(function(){
$("#slide_top-sidebar").slideToggle("slow");
$("#slide_top-subsidebar").slideToggle("normal");
});
$("#slide_top-sidebar").css({ display: 'none', });
$("#slide_top-subsidebar").css({ display: 'none', });
});

Para hacerlo compatible con Mootools añadiremos la función jQuery.noConflict() y cambiaremos las $ por jQuery, dejando así el código javascript:

jQuery.noConflict();
jQuery(document).ready(function(){
jQuery(".btn-slide").click(function(){
jQuery("#slide_top-sidebar").slideToggle("slow");
jQuery("#slide_top-subsidebar").slideToggle("normal");
});
jQuery("#slide_top-sidebar").css({ display: 'none', });
jQuery("#slide_top-subsidebar").css({ display: 'none', });
});

Sencillo, ¿verdad?

Hay un total de 35 comentarios y 3 pingbacks / trackbacks.

Armando Borge

que pasa si primeramente tengo implementado JQuery en cientos de archivos, obviamente no seria adecuado cambiar el codigo en todos los archivos…. cual  seria la solucion ???
:-S
 
Gracias

La solución sería aplicar una función como jQuery.noConflict() para Mootools, algo como mootools.noConflict().

Sin embargo he buscado un poco por Google y no he encontrado nada que indique que esa función existe, es decir, tú puedes “hacer compatible” jQuery con Mootools, pero no Mootools con jQuery (N) .

Te recomendaría un par de cosas:

  • No usar JS directamente en la página, sino usar un archivo jqueryfx.js que contenga los efectos que quieres que ocurran en la página, con lo que si quieres modificarlo te ahorras editar cada archivo de tu web.
  • Usar siempre jQuery.noConflict(), con lo que te ahorrarás tener que editar archivos para añadir otro framework.
  • Me gustaría poder decirte más, pero no sabría qué más decirte.

    Nota mental: Arreglar el CSS de las listas ordenadas en los comentarios.

    Armando Borge

    muchas gracias por tu tiempo… realmente muy buenas las soluciones… serian interesante desarrollar una funcion parecida para mootools, ahora si me lo permites me desvio un poco del tema, mi problema es el siguiente…
    tengo un proyecto que tiene decenas de componentes, cada componente esta en una carpeta con su codigo PHP/HTML, CSS , y javascript, todo esto con un motor de plantillas smarty… cada archivo JS de cada componente implementa jQuery hasta aca todo bien.
    recientemente he encontrado un plugins interesante para hacer Crop de imagenes on the fly… JCrop , este plugins trabaja bajo jQuery, pero la aplicacion que estoy desarrollando invoca en el header de la pagina la funcion
    var $jq = jQuery.noConflict();
    resulta que al tratar de usar JCrop
    <script language=”Javascript”> jQuery(function() { jQuery(‘#cropbox’).Jcrop(); });</script>se supone que la funcion noConflict(); activa el uso de jQuery en lugar de $ pero el firebug me envia el siguiente error:$(from) is null (sin indicarme ningun numero de linea del error)
      y deja sin funcionalidad el JCrop en cambio, si elimino la funcion noConflict(); del header si puedo usar el JCrop sin problemas pero pierdo la funcionalidad de el resto de mis componentes, la verdad no se que mas hacer he probado de todo pero no logro unificar las dos cosas
    bueno seguire intentando soluciones… si logro solucionar algo de seguro lo posteo…
    Saludos….

    Armando Borge

    Hola otra vez….

    olviden el comentario anterior, dos horas despues de ponerlo encontre la solucion a mi problema, en el archivo JS del plugin JCrop cambien todos las instancias de la variable $ usada  por jQuery a $jq  que es el nuevo nombre de mi variable de acceso a los elementos del DOM
    var $jq = jQuery.noConflict();
    lo cual se establece en el header… ahora mi plugin trabaja en armonia con Jquery y No hay conflictos…
    Saludos….
     

    ¡Me alegro que hayas conseguido que funcione!

    Creo que crear una función similar a jQuery.noConflict() para Mootools sería una gran idea, pero yo no sé mucho Javascript, así que no creo que pueda crear una función así.

    Esperemos que para una versión futura de Mootools incluyan esta función, yo mientras voy tratando de aprender más funciones de jQuery, me gustaría poder prescindir de Mootools y usar sólo jQuery.

    pepe

    muchas gracias, me has quitado un problema de encima.

    Armando Gracias por tu aporte yo estaba buscando lo mismo y no encontraba como arreglar el problema y gracias a ti lo solucione

    Yo tengo instalado un plug in de mootools y ahora todos los plug ins que isntalo que corren en jquery me dan error. Si quiero instalar varios plug ins con jquery, dónde agrego el jQuery.noConflict();? de pronto la respuesta e sobvia pero se muuuy poco de programación
     
    Muchísimas gracias
     
    jonathan

    El problema es que tendrías que modificar cada plugin por separado para que funcionase con jQuery.noConflict(). Yo te recomendaría deshabilitar el plugin que usa Mootools o buscar alguno alternativo que use jQuery.

    US3

    Justo cuando pensaba que era imposible la compatibilidad, encuentro ese sitio!
     
    Muchas gracias!

    Alexander

    Excelente solución !
    Precisamente yo tenía ese problema, y así como dices se ha solucionado perfectamente y sin errores (vigilado por firebug).
    Excelente !
    (Y)

    Cibb

    Muy bien!!! muchas gracias, tengo entendido que tambien puede hacerse algo asi:
    $j = jQuery.noConflict(); $j(document).ready(function(){ $j(”.btn-slide”).click(function(){ $j(”#slide_top-sidebar”).slideToggle(”slow”); $j(”#slide_top-subsidebar”).slideToggle(”normal”); }); $j(”#slide_top-sidebar”).css({ display: ‘none’, }); $j(”#slide_top-subsidebar”).css({ display: ‘none’, }); });
    Si no esta bien de esta manera favor de corregirme.
     
    Espero que les sirva. Saludos

    Si señor, aquí tienes uno más al que has salvado la vida!

    Muy útil y una solución eficaz a la par que sencilla

    Vanesa

    Muchas gracias! Muy util!!!

    urielon

    GracIAs EXCEKLENTE COMENTARIO…. ya me cortaba las venas jajaj gracias me haz salvado.

    Alejandro

    MUCHAS GRACIAS!!!!!!! QUE CHEVRE!!!! ESTO ES REALMENTE LO QUE VENIA BUSCANDO ;).

    Daniel

    tnks viejo me solucionaste muchos conflictos…=)

    Rock-lando

    Goood men!!!… gracias por el documento este… ahora yo tengo una pregunta…

    Pasa que yo uso prototype con scriptaculous, y me gustaría saber si el cambio merece la pena…

    Prototype es una librería crossbrowser muy interesante, y la trabajo con scriptaculous, pero resulta que he descubierto que mootools y jquery tiene mejores efectos, pero me gusta como prototype trabaja el CrossBrowser… entonces la pregunta es… ¿qué me recomiendas al respecto, dejar prototype definitivamente o mezclarlo con uno de estos dos?, con cual me recomiendas?

    Gracias…

    Tu comentario… (Y)

    @Rock-lando: Nunca he trabajado con Prototype, pero entre MooTools y jQuery te recomendaría este último.

    MooTools me parece más complicado de usar que jQuery, además viene incluído en WordPress, con el que suelo trabajar mucho, así que es el que más me conviene.

    Sin embargo si trabajas con Joomla! te recomendaría MooTools, que es el que viene integrado.

    Si no usas ninguno de los dos, elige el que quieras… o incluso ambos.

    Muy buen post! perfectamente explicado, y muy buen ejemplo…saludos.

    Cristhian Diaz

    (Y) hey man, eso fue genial, MUCHISIMAS GRACIAS, me salbaste. Muchisimas Gracias, y un favor se paga con favor, en lo que te pueda ayudar, solo escribime.

    @Leandro Vellón, @Cristhian Diaz: Me alegro que os ayudase el artículo, espero que tengáis suerte y logréis cosas increíbles con jQuery.

    carlos

    gracias!!!!!!!

    Gracias!!!! (Y) :-D

    Gracias amigo , me sirvio de mucho tu explicacion, un saludote desde mexico.

    Pero aca se me presenta un problema que no veo que se resuelva por lo menos no para mi caso… “eso creo” :-S

    Sucede que tengo una variable asi por ejemplo:
    var $container = this; //Variable en jQuery

    Que debe hacer con ella? Que pasa con el sibolo $, hay que modificarlo tamb o simplemente hay que eliminarlo?

    Desde ya muchas gracias!

      Respondiendo a Alan Wiesse

      Yo probaría con:

      var jQuerycontainer = this.

      Aunque si no te funciona puedes arreglarlo por “ensayo y error”. Prueba ambos métodos y mira cuál funciona.

    Mario

    Excelente solución!! del tiempo que me ahorré.. muchisimas gracias

    Juan Garay

    Muchas gracias, me funcionó a la perfeccion! (Y)

    Jose

    Muchas gracias! me ha sido muy util

    bombe

    Gracias por el aporte de este articulo me ha salvado la vida, jejeje (Y)

    juan carlos

    hola yo eh estado buscando un no conflicto para 2 pluing q tengo uno es un mootools y el otro es un jquery.min.js.
    los 2 me hacen conficto y solo puede funcionar uno de los 2 el Jquery es de una aplicacion llamada popeye aqui les dejo el link
    http://dev.herr-schuessler.de/jquery/popeye/demo.html

    y el mootools es de unos botonces que me gustaron mucho aqui dejo link tambien
    http://greengeckodesign.com/projects/MenuMatic/examples/vertical/index.htm

    entonces quiero q los 2 estan en un index pero no los puedo hacer q los dos concuerden.

    les agradesco de todo corazon la persona q me ayude. Mil gracias a todos.

      Respondiendo a juan carlos

      Si no te funciona lo que explico en el artículo, lo más fácil es que te pongas en contacto con los autores de ambos plugins y les digas que son incompatibles. Quizá los actualicen y solucionen el problema.

    Cirex

    Solucionaste mi problema en 10 segundos. Gracias.

    Enrique

    Hey, muchas gracias por tu explicación. Gracias a tu post pude resolver el conflicto.
    Un abrazo!


    Escribe un comentario

    :-) :-D :-P (H) ;-) (*) :-( :-O ;-( :-S :-$ (I) (Y) (N) (G) (^) (D) (C) (B) :-[ (@) (&) (L) (U) (K) (F) (W) (O) (E) (T) (~) (8) (P)