Conflicto JQuery vs Mootools

Hoy desarrollando un proyecto me he encontrado con un problema en una sección de la web. Para esta sección quería hacer uso de dos librerías distintas de javascript: JQuery y Mootools.
El caso es que entre ellas existe un conflicto que hacía que el efecto que quería hacer con JQuery no lo ejecutaba.

Indagando por la web, he encontrado la solución (por lo menos para el caso que estaba haciendo) y es hacer uso de la función jQuery.noConflict(). Lo que tuve que hacer fue lo siguiente:

  1. En el script donde inicializaba el JQuery llamar a la función jQuery.noConflict()
  2. Y luego cada vez que usase el $ que se usa con jquery sustituirlo por jQuery

Y ya está. Más información en el enlace de arriba :D

6 comentarios

  1. Martin
    enero 28, 2009 a las 10:47 am · Responder

    Excelente post, lo tendré en cuenta porque ya me había topado con ese problema y opté por buscar otro efecto y no usar jquery (era un lightbox de esos que hay a montones)…

    Saludos!

  2. elOtro[Q] (Autor)
    enero 28, 2009 a las 10:55 am · Responder

    Me alegro de que te guste Martín. Yo sólo lo he probado una vez y parece que funciona. No obstante si me encuentro con algún caso en el que no funcione ya te aviso :)

  3. juan carlos
    septiembre 15, 2009 a las 7:18 pm · Responder

    saludos, tengo el mismo problema conflicto entre jquery y mootools pero he tratado d ela misma manera que tu y aun asi sigue el error, solo funciona cada vez que saco la linea donde agrego mi jquery y esa no es la idea,helpme

  4. totushi
    octubre 12, 2009 a las 5:27 am · Responder

    podrias dar un ejemplo en como implementar este script, apenas estoy emepzando a programar, seria de gran ayuda ver como y donde va? gracias

  5. elOtro[Q] (Autor)
    octubre 12, 2009 a las 11:27 am · Responder

    Lo único que tienes que hacer es antes de usar nada de JQuery escribir la siguiente línea:

    jQuery.noConflict();

    Y luego cada vez que uses JQuery en vez de usar el $ poner jQuery. Como por ejemplo si quisieras cambiar el color de un etiqueta con id “miid” en vez de poner:

    $("#miid").css({ color: "#0099CC"});

    pondrías:

    jQuery("#miid").css({ color: "#0099CC"});

    Y listo!!!

  6. totushi
    octubre 14, 2009 a las 9:19 pm · Responder

    no me ha salido, no se si sea totalmente otro motivo por el cual mi forma de contacto no funcione, asi ingrese el codigo:

    jQuery.noConflict();
    jQuery(document).ready(function() {
    var options = {
    target: ‘#alert’,
    };
    jQuery(‘#contactForm’).ajaxForm(options);
    });

    jQuery.fn.clearForm = function() {
    return this.each(function() {
    var type = this.type, tag = this.tagName.toLowerCase();
    if (tag == ‘form’)
    return jQuery(‘:input’,this).clearForm();
    if (type == ‘text’ || type == ‘password’ || tag == ‘textarea’)
    this.value = ”;
    else if (type == ‘checkbox’ || type == ‘radio’)
    this.checked = false;
    else if (tag == ‘select’)
    this.selectedIndex = -1;
    });
    };

Deja un comentario