jQuery noConflict(): Como evitar el conflicto y duplicidad del alias $

El uso de jQuery noConflict() se puede volver necesario cuando trabajamos con varias librerías de Java Script en la misma web. Pudiendo coincidir juntas tales como jQuery, Prototype, Mootools o Scriptaculous.

Estas librerías suelen usar el alias $, cuando varias usan el mismo alias $ puede surgir el conflicto o duplicidad de la función.

En bastantes ocasiones suele suceder cuando usamos diferentes animaciones en jQuery. Para evitar estas situaciones debemos usar la función  jQuery noConflict(). Os recomiendo leer estos post que os puedes resultar útiles:

• jQuery ready(): Repaso a la función $( document ).ready()
• jQuery chaining: Aplicar secuencias de efectos

Sintaxis jQuery noConflict()

Vamos a ver la sintaxis de esta función extraída de su web oficial.

jQuery.noConflict( [removeAll] );

• removeAll: Podemos poner true o false, por defecto en caso de omisión es true.

Ejemplo del error ‘$ is not a function’

Os he preparado este primer ejemplo para ver el error que se produce cuando trabajamos con 2 librerias que usan el alias $ al mismo tiempo.

//código colocado en el head
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>

//código colocado en el body
<script type="text/javascript">
 $(document).ready(function() {
            alert("Si salgo es que no hay conflicto!!!");
 });
</script>

Explico el ejemplo:

• Se realizan 2 llamadas a las librerias de jQuery y Prototype que van dentro de la etiqueta head.
• Posteriormente he preparado un mensaje alert usando el alias $ de jQuery.
• Si revisamos la url con un debuger veremos que nos sale el siguiente error:

$ is not a function

El debuger que he usado ha sido la consola de errores de Firefox. Os muestro un pantallazo del error.

Ejemplo para solucionar el error ‘$ is not a function’ con jQuery noConflict()

Os he realizado este segundo ejemplo para que veáis que fácil es solucionar el problema.

<script type="text/javascript">
 var nuevoalias = jQuery.noConflict();
 nuevoalias(document).ready(function() {
     alert("Si salgo es que no hay conflicto!!!");
 });
</script>

Explico el código:

• He modificado ligéramente el código para dar entrada a jQuery noConflict().
• Creo la variable ‘nuevoalias‘ y he asigno el valor de noConflict.
• Ahora en vez de llamar al alias ‘$’ debemos llamar a ‘nuevoalias’. Podéis llamar a la variable como queráis… Por ejemplo ‘jq’.
• El alert con el mensaje sale por pantalla.