Saltar al contenido

Problema jQuery con prototype.js y otras librerias

21 diciembre, 2011

En varios sitios web se utilizan diversas librerias js como por ejemplo prototype, scriptaculous o lightbox, que junto a jQuery, generan algunas incompatiblidades o conflictos.

Investigando en una buena cantidad de foros, la solución parece simple pero poco efectiva, lo que se menciona es  invocar un método de Jquery llamado noConflict() , para cambiar el método de invocación que por defecto es $, que es utilizada por jQuery y prototype.js. , esa es la razón principal y única del problema.

A pesar de seguir los pasos e instrucciones que se mencionan en varios blogs y foros, (añadir código, modificar  librerias, utilizar el metodo noConflict, etc).no pude solucionar el conflicto. La solución que encontré es demasiado simple, hasta pasa por lo obvio: Descargar las últimas versiones de jQuery y Prototype!!!, así de simple, en las nuevas versiones estan corregidos los conflictos con el famoso «$».

Los enlaces de descarga son:

jQuery: http://docs.jquery.com/Downloading_jQuery#Download_jQuery

Prototype: http://www.prototypejs.org/download

Cambian las librerias antiguas por las nuevas y listo! sin necesidad de modificar una sola línea de código.

En caso de que se mantenga el problema, podemos utilizar el metodo noConflict(), por ejemplo:

<script type=»text/javascript»>
var q = jQuery.noConflict();
q(window).load(function(){
q(‘.slider’)._TMS({
duration:800,
easing:’easeOutQuad’,
preset:’simpleFade’,
pagination:’.pagination’,
slideshow:7000,
banners:’fromLeft’,
waitBannerAnimation:false,
pauseOnHover:true
})
})
</script>

En este caso sustituimos «$» por «q«

From → JQuery

9 comentarios
  1. donde sustituyo el “$” por “q?? en el archivo jquery??

  2. diego permalink

    hola, tengo el siguiente jscroller que utiliza jquery:

    $(document).ready(function(){

    // Add Scroller Object
    $jScroller.add("#scroller_container","#scroller","up",1);

    // Start Autoscroller
    $jScroller.start();
    });

    yo reemplaze $ por jquery , tamb agregue el noconflict pero no pasa nada.
    Como veras esta el $jscroller, si hago lo que vos decis quedaria: jqueryjscroller.add(…
    y de esta forma no funciona. He probado de todas formas como has explicado.
    Cual seria mi problema?

  3. Estoy haciendo una pagina con un efecto de esta pagina:http://www.addyosmani.com/resources/shinetime/ el cual usa la version http://code.jquery.com/jquery-1.4.2.min.js
    lo he descargado y probado, todo perfecto pero cuando intento actualizarlo para trabajar con el jquery acutal:http://code.jquery.com/jquery-1.8.3.js, tiene problemas con los efectos, he intentado con :jQuery.noConflict(); pero sin exito, si alguien tiene alguna otra solucion les agradeceria mucho!!!!

  4. disculpa me urge saber como resolverlo agregue el script q colocastes en el head de mi vista pero de igual manera sigo con el mismo problema me seria de gran ayuda si me detallaras mas en donde se coloca el script…estoy trabajando con el framework codeigniter aun no creo q sea de gran importancia porq los menu y los datatables me funcionan de manera correcta solo q se desabilitan cuando agrego el script del prototype.js

  5. Wao Gabriel de verdad te agradezco este aporte!, mas de 5 horas dándome golpes y leyeno N páginas gracias a tu post pude solucionar mi problema que era con jquery modalbox y autoSugget no trabajaban en conjunto y al actualizar la libreria de prototype y scriptacolous en conjunto con un var q = jQuery.noConflict(); funcionó a la perfeccion

  6. Tio increible… El puñetero amo. Lo entendi perfectamente y me funciono. Tuve que poner el codigo de noConflict
    Pero Chapo!

  7. ags permalink

    Excelente Solución y como dices muy obvia, me he quebrado la cabeza para encontrar la soluciónya que con el método noConflict nunca me funcionó.

Deja un comentario