Ulzurrun de Asanza i Sàez

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?


56 replies on “Como evitar conflictos entre Mootools y jQuery

  1. 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

  2. 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:
    <l>
    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.

  3. 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….

  4. 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….
     

  5. ¡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.

  6. muchas gracias, me has quitado un problema de encima.

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

  8. 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 <code>jQuery.noConflict();? de pronto la respuesta e sobvia pero se muuuy poco de programación</code>
     
    Muchísimas gracias
     
    jonathan

  9. 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.

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

  11. 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)

  12. Muy bien!!! muchas gracias, tengo entendido que tambien puede hacerse algo asi:
    <code>$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’, }); });</code>
    Si no esta bien de esta manera favor de corregirme.
     
    Espero que les sirva. Saludos

  13. 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

  14. Muchas gracias! Muy util!!!

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

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

  17. tnks viejo me solucionaste muchos conflictos…=)

  18. 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)

  19. @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.

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

  21. (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.

  22. @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.

  23. gracias!!!!!!!

  24. Gracias!!!! (Y) :-D

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

  26. 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!

    1. 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.

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

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

  29. Muchas gracias! me ha sido muy util

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

  31. 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….

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

    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.

    1. 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.

  32. Solucionaste mi problema en 10 segundos. Gracias.

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

  34. (Y) genial, me sirvio a la perfección !! muchas gracias

  35. Espectacular maestro! me salvaste!
    saludos

  36. GRACIAS! Genial!

  37. JODA TE AMOOOOOOO ERES MI HEROE GRACIAS MEN. FUNCIONO PERFECTAMENTE ERES MI IDOLO TE AMOO JAJJAJAJ :-D :-D :-D :-D :-D :-D :-D (H) (H) (H) (H) (H)

  38. :-D :-D :-D :-D :-D :-D
    Perfecto, la solución definitiva a las complicaciones!!
    De frameworks !!!
    NO CONFLICT !!!!!!

    SALU2

  39. Gracias amigo, era un pequeño detalle nomás que había que cambiar, yo estaba usando en la cabecera de mi back-end PHP una mezcla de jquery con prototype y scriptaculous, y justamente jquery no quería funcionar, con este cambio en las variables anda perfecto, gracias.

  40. Gracias por esta solución, funciona perfectamente.

  41. MERCI!!!!

  42. Hola muy buena pagina veo que conoces de Jquery te voy hacer una consulta es la siguiente

    tengo este theme que usa jquery y en incluido un plugin llamado Featured Content Gallery el problema esta que me tiene conflicto con el plugin y no muestra el slider post

    Luego descubri que al quitar esta linea de codigo del footer si muestra el slider post pero me deja de funcionar los menus ya que utlizan ese llamado del scritp
    alguna solucion?
    este es el theme

    gracias de antemano

    1. ¿Estás usando este theme?

      Es un theme de pago, y me imagino que los propios desarrolladores ofrecerán soporte técnico, más aun cuando encima cobran por sus themes. Pregúntales a ellos, sabrán responderte mucho mejor (además de ser profesionales – yo sólo soy un aficionado – son los autores del theme, así que se lo conocen mejor que nadie).

      Por otro lado, si no has pagado por él y por tanto no tienes soporte, me temo que no puedo ayudarte. No me gustaría que otros diesen soporte a mis proyectos de pago y contribuyesen a que mi trabajo no se valorase, así que yo tampoco lo haré con su trabajo.

      Por cierto, elimino el enlace, no se permiten las descargas con Copyright en Sumolari.com, aparte de cualquier otro motivo, mis proveedores de hosting no lo admiten.

  43. Estimado amigo, estoy efectuando justo los cambios para el comflicto entre mootool y jquery en joomla, pero cuando le doy el echo para que imprima el script js con sus respectivos jquery en ves de $, me da un error justo en el archivo de otro js foraneo.. es decir este : jQuery is not defined –> var $ = jQuery,
    este ultimo esta ubicado en la primera linea del archivo
    https://github.com/tobia/CrossSlide/raw/master/jq
    que es que estoy utilizando para unas imagenes

    agradeceria algun apoyo.. saludos

    1. Las veces que he tenido problemas similares casi siempre han consistido en que he llamado al .noConflict antes de tiempo, por ejemplo, antes de cargar los archivos necesarios para mi código Javascript.

      También me ha dado problemas hacer cosas como:

      [js]
      var j = jQuery.noConflict();
      [/js]

      Pero tampoco soy ningún experto en Javascript, además de lo poco que sé, el único framework quehe utilizado más es jQuery, Mootools lo usé hace bastante y bien poquito, así que poco puedo decirte.

      Te recomiendo que si tienes más problemas, preguntes en un foro especializado, como Foros del Web, seguro que por ahí hay alguien que te puede ayudar.

      ¡Suerte!

  44. Muy necesario te felicito por el post yo he desarrollado en mootools y usado infinidad de efectos, pero k mejor k usar otro framework tan conocido como jquery a la par. Estoy disponible para intercambiar experiencias jQuery y mootools. webmaster@tendenciaweb.com.mx

  45. Hola. Hace un par de meses comencé un curso web porque la verdad no sabía nada de nada. Tuve un problema al intentar usar lightbox y videobox con un s3slider ya que, como tú bien dices, no son compatibles.

    Para lightbox lo solucioné usando un slimbox2 y todo funcionó Ok.

    Para videobox no encontré la misma solución y así llegué a esta página. Leí tu tutorial y no entendía donde hacer los cambios. Cuando al fin descubrí donde generar los cambios (intruseando los códigos un buen rato)lo probé y todo funcionó perfecto.

    De verdad muchísimas gracias por compartir tu conocimiento con los demás. Demasiado útil.

    :)

  46. Disculpe, soy novata en joomla pero quisiera aplicar un script en un componente (mi componente se llama subirarchivo) y el boton que invoca este script es un boton “Enviar Inscripcion”

    function btnRecomendarServicio_onclick() {
    alert(“asd”);
    }

    $.noConflict();
    jQuery(document).ready(function($) {

    $(“.numero”).keyup(function(){
    if ($(this).val() != “”)
    $(this).val($(this).val().replace(/[^0-9]/g, “”));
    });

    $(“#enviarDatos”).click(function(){

    $(“#myform”).submit();

    });
    });

    le he puesto el noconflict tambien probe poniendo jquery.noconflict pero nada , porfas si me pueden ayudar seria increible.

    1. Creo que el problema es que en lugar de usar $.noConflict(); deberías usar jQuery.noConflict();:

      [js]
      function btnRecomendarServicio_onclick() {
      alert(“asd”);
      }

      jQuery.noConflict();
      jQuery(document).ready(function($) {

      $(“.numero”).keyup(function(){
      if ($(this).val() != “”)
      $(this).val($(this).val().replace(/[^0-9]/g, “”));
      });

      $(“#enviarDatos”).click(function(){

      $(“#myform”).submit();

      });
      });
      [/js]

  47. Muchas gracias. Muy útil la aportación.

Leave a Reply

Your email address will not be published.

Required fields are marked *

Your avatar