jQuery, resolver conflictos con Mootools, Prototype

jquery

En un proyecto recientemente, tuve un pequeño y gran problema, un menu el site estaba hecho con Prototype y Mootools, y yo hice parte del proyecto aparte, al unirlo yo trabaje en jquery y me daba todo tipo de errores y conflictos.

Como hice, bueno leyendo en la web  y principalmente en visualjquery.com me percate que existe una funcion de jquery que se llama .noConflict() el cual una de las funciones del mismo es cambiar el alias ($) a cualquier otro que deseamos.

El codigo que utilice fue el siguiente:

Antes
Query().ready(function(){
$("a.listaFull").toggle(
function(){
$("#resultado").slideDown(200);
},
function(){
$("#resultado").slideUp(100);
});

Despues

var j = jQuery.noConflict();
Query().ready(function(){
j("a.listaFull").toggle(
function(){
j("#resultado").slideDown(200);
},
function(){
j("#resultado").slideUp(100);
});

Que es todo esto, bueno

creamos un nuevos alias, pero de tipo noConflict() el cual hereda todas las funciones del jquery normal, de alli en adelante utilizamos a la j como si fuera $ de jquery, de esta manera no chocamos ni con prototype ni mootools.

19 comments ↓

#1 FittibeChiefe on 02.24.09 at 10:13 pm

Thank you!

#2 Raúl Vidal on 03.24.09 at 12:14 pm

Hola que tal amigo tengo un problema de scripts en mi blog de blogger ente jquery y prototype. Pero no se nada de scipts no se si me puedes ayudar a solucionarlo???

Gracias

#3 Arcadio on 03.24.09 at 10:14 pm

A ver raul en que te puedo ayudar, no soy disque experto pero si te puedo ayudar venga…

#4 robertocapi on 04.22.09 at 1:33 am

muchas gracias mi buen no sabes como me ha ayudado, te debo una jeje, funciona a la perfecion.gracias

#5 marcos on 02.26.10 at 5:47 pm

Podrian ayudarme!!! porfavor…. en la web que estoy haciendo… estoy utilizando dos diferente tipos de slide…simpre con jquery,, pero solo se activa uno….. si cambio el llamado del javascript de jquery en otra ubicacion me funciona uno y el otro no. y se lo vuelvo a poner en su lugar se desactiva y el otro funciona..no se como resover esto…. los que estoy utilizando son…en este mismo orden::::::

$(document).ready(function(){

$(“.btn-slide”).click(function(){
$(“#slide-panel”).slideToggle(“slow”);
});

});

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

var pageTracker = _gat._getTracker(“UA-499901-1″);
pageTracker._initData();
pageTracker._trackPageview();

#6 marcos on 02.26.10 at 5:52 pm

hola soy yo nuevamente no aparecieron muy bien el orden,,,,seria asi::::

slider.js
core.js
jquery.min.js

luego el script del segundo slide:::::

$(document).ready(function(){
$(“.btn-slide”).click(function(){
$(“#slide-panel”).slideToggle(“slow”);
});
});

y por ultimo la oren de un carrusel que se desconfigura cuando muevo el jquery de su lugar original:::

compiled.js

var gaJsHost = ((“https:” == document.location.protocol) ? “https://ssl.” : “http://www.”);
document.write(unescape(“%3Cscript src=’” + gaJsHost + “google-analytics.com/ga.js’ type=’text/javascript’%3E%3C/script%3E”));

var pageTracker = _gat._getTracker(“UA-499901-1″);
pageTracker._initData();
pageTracker._trackPageview();

#7 sol on 05.31.10 at 11:07 am

Hola tengo un problema con unas imagenes que corren solas (mootools.js) y la galeria de lightbox (prototype.js)
Cómo hago para que funcionen juntas ??
Please ayudaaaa

#8 Arcadio on 05.31.10 at 11:14 am

Bueno sol, lamentablemente esa convinacion mootools con prototype no las he probado pero lo que pasa alli es que las 2 usan $ como acceso a las funciones propias y se pelean , en jquery hay algo que se llama noConlict() que lo llamas antes de comenzar a programar con tu jquery y ya arregla esto, pero con mootools no tengo idea. Lo que puedes hacer de repente es bueno si estas usando un slide, puedes usar uno basado en jquery y aplicar esto de noconclict.

#9 Arcadio on 05.31.10 at 11:15 am

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/
Algunos slides en jquery.

#10 Alejandro on 12.16.10 at 1:56 pm

Muchas gracias, la verdad, yo también tenia confictos, pero con mootools.js y jquery.min.js. Hice lo que comentas y funcionó perfecto!! :)

#11 J.S. on 05.20.11 at 11:58 am

Excelente Gracias me soluciono un problema que tenia.

#12 Arcadio on 05.20.11 at 8:45 pm

Uff… viejo este post… me alegro que te halla servido.

#13 fernando on 07.02.11 at 1:55 pm

muy buen post, he resuelto un problema que tenia con esta ayuda…gracias

#14 Federico on 08.20.11 at 9:45 am

HOla amigos, quiero preguntarles porque estoy teniendo un conflicto con dos efectos en la misma página, los cuales son lightbox y jquery haciendo un slidedown o funciona uno o funciona el otro…conocen alguna solución? muchas gracias desde ya! y les dejo un link temporal de la página en cuestión asi no les copio todo el código aca..saludos!!
http://www.billeneyasociados.com/web/servicios.php

#15 Arcadio on 08.21.11 at 8:31 pm

En vez de usar $(document).ready(function() {
// Muestra y oculta los menús
$(‘ul li:has(ul)’).hover(
function(e)
{
$(this).find(‘ul’).slideDown();
},
function(e)
{
$(this).find(‘ul’).slideUp(700);
}
);
});
var $ = jQuery.noConflict();

Utiliza
jQuery(document).ready(function() {
// Muestra y oculta los menús
jQuery(‘ul li:has(ul)’).hover(
function(e)
{
jQuery(this).find(‘ul’).slideDown();
},
function(e)
{
jQuery(this).find(‘ul’).slideUp(700);
}
);
});

En vez de utilizar $ para usar jQuery usa jQuery completo. asi no hace conficto con el $ de prototype.
Saludos..

#16 Federico on 08.22.11 at 6:47 pm

Arcadio, muchas gracias! Lo probé y me aparecen los elementos del lightbox superpuestos en la página y un cuadrado negro encima de la parte superior..ahora lo subo para que lo veas…Me está volviendo loco Jquery!

#17 Osmar on 09.01.11 at 6:51 am

sos mi idolo me salvaste! excelente ayuda

#18 Jorge on 10.12.11 at 3:04 am

arcadio, pero en qué archivo de mi joomla debo poner el código q comentas?

#19 Arcadio on 10.13.11 at 1:45 am

Hola Jorge, si usas joomla te recomiendo usar un plugin que se llama SC jquery el mismo cuando lo instalas tienes que activarlo, despues le das la opcion de que el mismo te llame el jquery desde google, y carga un pequeño codigo que es el que hace que no haga conflicto, de alli en adelante en vez de usar $ para usar jQuery usa jQuery y listo, me ha servido mucho. Ahora si lo deseas poner a mano, en el template de joomla, templates/{tu_template}/index.php lo pones en el header, y listo todas las paginas generadas por ese template te van a cargar el jquery con el no Conflict.
Saludos.

Leave a Comment