domingo, 8 de enero de 2012

jQuery y el problema con otras librerias (prototype, scriptaculous, lightwindow, etc.)

Muchas veces es necesario utilizar en nuestra aplicación otras librerias que nos permitan dar versatilidad, diseño y presentación a nuestra aplicación Web, sin embargo, al combinar ciertas librerias junto con jQuery podremos encontrarnos con ciertos detalles y errores al momento de que nuestra aplicación cargue. Y es que aveces nos guiamos más por revisar si el código tiene errores de sintáxis que en otro detalle más peculiar: La compatibilidad entre jQuery y otras librerias.

Por ejemplo, a mí me pasó en las primeras veces que andaba "jugando" con jQuery; me surgió la idea de hacer una pequeña página web donde utilizara jQuery y la libreria de lightwindow , sin embargo cuál fue mi sorpresa al descubrir que los efectos de Lightwindow no estaban funcionando, así que me "quebré un rato el coco" analizando mis instrucciones y viendo el origen del error (con la Consola de Errores del Firefox). Hasta que por fin hallé el problema: Librerías como Prototype.js, usan el mismo modelo de $( ) como jQuery para seleccionar algún elemento del DOM.

¿Hay solución o me tendré que resignar a no combinar las librerías con jQuery?

Afortunadamente, jQuery cuenta con un reemplazo al método $( ) con el fin de solucionar estos problemas y evitar conflictos con otras librerias. Esto se logra mediante el método:

jQuery.noConflict( );

A partir de ahí ahora reemplazaremos nuestra función de $( ) por la palabra jQuery( ) y ¡listo! Nuestro código y métodos funcionarán de la misma manera que con la función factory.

Vamos a suponer que nosotros modificaremos un cambio de estilo a un div al hacerle click usando lo anterior. Nuestro script quedaría de la siguiente manera:

< script src="http://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"> < /script >
< script >
jQuery.noConflict( ); //Declaramos que vamos a usar la segunda forma de jQuery...
jQuery(document).ready( function( )
{
 jQuery("div").click( function ( ) { jQuery(this).addClass("estilo"); } );
}
);
< /script >
Así, de esta forma, evitamos tener problemas con otras librerias y podemos seguir trabajando de forma normal. Saludos.