Molte librerie javascript utilizzano il simbolo $ come nome di una funzione e, di conseguenza, se si utilizzano due librerie javascript, nello stesso documento (in questo articolo si utilizzano jQuery e mootools ), può capitare che si crei un conflitto tra le funzioni delle due librerie.

In questo tutorial viene mostrato come usare due delle più diffuse librerie javascript, jQuery e mootools, nello stesso documento.

Usare jQuery e mootools

Nel seguente esempio, la prima istruzione utilizza la funzione $() di jQuery per modificare il colore del testo di un paragrafo con il metodo css().

Nella seconda istruzione s’intende utilizzare la funzione  $() di mootools per modificare il colore del testo con il metodo setStyle().

<p id="jq">Testo modificato da jQuery</p>
<p id="moo">Testo modificato da Mootools</p>
<script src="mootools.js"></script>
<script src="jquery.js"></script>
<script>
     // Codice che utilizza jQuery
	jQuery('#jq').css('color','green');

    // Codice che utilizza mootools
       $('moo').setStyle('color', 'red');
</script>

Se si visualizza l’esempio si noterà che l’istruzione di mootools non funziona perché il browser interpreta il simbolo del dollaro come funzione jQuery e non trovando il metodo setStyle(), in jQuery, l’istruzione non viene eseguita.

Se si vuole utilizzare le funzionalità di entrambe le librerie nello stesso file si può utilizzare la funzione $.noConflict() di jQuery che ripristina il valore predefinito del simbolo del dollaro che da quel momento non rappresenta più la funzione jQuery.

Usare la funzione $.noConflict()

L’esempio precedente può essere modificato aggiungendo la funzione $.noConflict() alla fine delle istruzioni jQuery. Nelle istruzioni successive il simbolo del dollaro non si riferirà più alla funzione jQuery() ma si riferirà alla funzione $() di mootools.

<p id="jq">Testo modificato da jQuery</p>
<p id="moo">Testo modificato da Mootools</p>
<script src="mootools.js"></script>
<script src="jquery.js"></script>
<script>
    // Codice che utilizza jQuery
	jQuery('#jq').css('color','green');
	$.noConflict();
    // Codice che utilizza mootools
    $('moo').setStyle('color', 'red');
</script>

Visualizza la demo.

Un altro modo di utilizzare la funzione $.noConflict(), consiste nel chiamarla prima di un blocco di istruzioni jQuery, come mostrato nel seguente esempio:

<p id="jq">Testo modificato da jQuery</p>
<p id="moo">Testo modificato da Mootools</p>
<script src="mootools.js"></script>
<script src="jquery.js"></script>
<script>
$.noConflict();
  jQuery(document).ready(function($) {
    // Codice che utilizza jQuery
	$('#jq').css('color','green');
  });
  // Codice che utilizza mootools
$('moo').setStyle('color', 'red');
</script>

Il simbolo del dollaro viene passato come argomento alla funzione di callback del metodo ready(), al cui interno può essere usato il simbolo del dollaro come funzione jQuery().

Al di fuori della funzione di callback, il dollaro riprende il suo significato originario e, in questo caso, diventa il nome della funzione $() di mootools.

Visualizza la demo.

Per altre informazioni consultare la documentazione ufficiale di jQuery alla pagina jQuery.noConflict().