Come evitare i conflitti tra le librerie jQuery, Prototype, Scriptaculous e Mootools.

Come installare contemporaneamente in un modello di Blogger jQuery insieme a Prototype, Scriptaculous, Mootools tramite noConflict.

Attraverso il linguaggio javascript sono state implementate nelle pagine web delle funzionalità che le rendono dinamiche. Quando vedete uno slideshow di immagini o un widget scorrevole da inserire nel vostro sito immancabilmente c'è una libreria javascript che svolge il compito principale.

Alcune di queste librerie sono diventati degli standard e vengono utilizzate per gli effetti più svariati. La più conosciuta e utilizzata è probabilmente jQuery che viene aggiornata periodicamente. Non è però la sola visto che ce ne sono altre molto usate dagli sviluppatori che creano temi per Wordpress e modelli per Blogger. Ricordo Prototype e Scriptaculous  che vengono spesso utilizzate contemporaneamente ma anche Mootools ha molti estimatori. 

Quando in un tema Wordpress o in un modello Blogger viene installato jQuery se si prova a installare anche Scriptaculous smette tutto di funzionare. La ragione dipende dal fatto che questi script utilizzano la stessa sintassi per chiamare le funzioni dello script. La stessa jQuery però ci dà la possibilità di risolvere il conflitto per procedere alla installazione anche Prototype, Scriptaculous o Mootools insieme a jQuery. Per questioni euristiche forse è opportuno fare un paio di esempi pratici. Consideriamo il codice per visualizzare dei tooltip in una pagina di Blogger

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/jquery.tinyTips.js' type='text/javascript'/> 
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a.tTip&#39;).tinyTips(&#39;title&#39;);
$(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);
});
</script>

oppure il codice per una Sticky Sidebar

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/scriptperilblog/javascript-2/share-botton-bar.js' type='text/javascript'/>
<script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
$('#share-buttons').stickySidebar({speed: 300, constrain: true})
});
//]]>
</script>

Possiamo osservare come abbiano una struttura molto simile. La riga evidenziata di giallo è lo script jQuery e la riga evidenziata di verde è lo script aggiuntivo per quel particolare effetto. In entrambi i casi mentre jQuery è stata installata tramite le API di Google gli script aggiuntivi sono stati caricati su Google Sites ma potevano essere benissimo caricati su Google Drive o altro hosting. 

In sostanza un effetto creato con jQuery ha questo codice di base

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

dove è stata evidenziata di beige la riga che richiama la funzione di jQuery. Il resto del codice è chiaramente diverso in relazione alla particolare funzionalità di jQuery che si vuole utilizzare. Il problema della compatibilità si risolve inserendo la riga jQuery.noConflict(); prima dl comando e sostituendo il simbolo del dollaro $ con jQuery in modo che non ci siano conflitti tra questo comando e quello analogo di Prototype, Scriptaculous, ecc Il codice precedente va quindi modificato in questo modo

<script src="URL_archivio_jQuery" type="text/javascript" />
<script src="URL_Script_Aggiuntivo" type="text/javascript" />
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
jQuery("div").hide();
});
</script>

Tornando al primo esempio del codice dei tooltip. La modifica necessaria per renderlo compatibile con un'altra libreria javascript dovrà essere la seguente

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script src='https://sites.google.com/site/scriptperilblog/javascript-2/jquery.tinyTips.js' type='text/javascript'/> 
<script type='text/javascript'>
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery(&#39;a.tTip&#39;).tinyTips(&#39;title&#39;);
jQuery(&#39;img.tTip&#39;).tinyTips(&#39;title&#39;);
});
</script>

dove gli elementi aggiunti o modificati sono stati colorati di blu e evidenziati di rosso. Dopo questa modifica potranno essere inserite altre librerie oltre a jQuery senza provocare conflitto.