Revista Blog

Evitar conflictos entre jQuery y Scriptaculous al mismo tiempo

Por Aizum Blog @aizumblog

jQuery conflicts
Sin duda, es unos de los problemas que se lleva mucha gente, las manos a la cabeza, y no sabes ni por dónde a venido, ni cómo ha parecido, el problema, ni cómo arreglarlo o solventar el problema. Cuando usamos las librerías jQuery, scripaculous, prototype, a la vez, incluso Mootools, nos generará conflictos de compatibilidades. Pero hay una forma de solventarlo y es una solución fácil, cuando sabes cómo arreglar, dicho inconveniente. El hecho es que no puedes usar jQuery y Scriptaculous o viceversa, a la vez, o al mismo tiempo.
La cuestión del porqué surge este problema, es que lo que sucede es que ambas librerías utilizan la misma sintaxis para hacer la llamada a las funciones del script, y esto hace que las librerías no sepan a que librería hacerle caso, si a una u otra, ya que las dos usan las misma forma de leer las instrucciones. Sin embargo, jQuery nos facilita la solución desde la versión 1.0, usando una variable en la sintaxis (comando: jQuery.noConflict();), está solución sirve para que no entren en conflicto las librerías y podamos usar jQuery, Prototype, y Mootools a la vez.
Evitar conflictos entre jQuery y Scriptaculous al mismo tiempo  Evitar conflictos entre jQuery y Scriptaculous al mismo tiempo
Un script normal jQuery se vería de está forma:

<script src="La_URL_del_archivo_jQuery" type="text/javascript" />
<script src="La_URL_del_script_necesario_para_las_funciones_jQuery" type="text/javascript" />

<script type="text/javascript">
$(document).ready(function(){
$("div").hide();
});
</script>


Veamos la Solución, Implantemos la variable usando el comando jQuery.noConflict(); de está forma:

<script src="La_URL_del_archivo_jQuery" type="text/javascript" />
<script src="La_URL_del_script_necesario_para_las_funciones_jQuery" type="text/javascript" />
<script src="" type="text/javascript" />

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>
  1. Lo que hemos hecho para la solución, es agregar antes de las instrucciones del script, el comando jQuery.noConflict(); y además cambiamos todos las $ que encontremos por la palabra jQuery. Espero que os resulte útil este truco, para la solución de incompatibilidad para evitar conflictos entre las librerías.

Volver a la Portada de Logo Paperblog