conflitti jquery

Dopo aver installato iCagenda vedete una pagina bianca, lo slideshow non funziona, il calendario non va?

Sempre più spesso ricevo richieste di aiuto che hanno come denominatore comune conflitti jquery. La richiesta tipica è: non vedo il calendario, non vedo il modulo, non vedo il menù, ho una pagina bianca. Oppure: il calendario non funziona insieme allo slider delle immagini, nelle pagine dove c'è il modulo calendario il menù non funziona bene, o ancora; utilizzando iCagenda con il template "XY" il calendario non funzione, ma impostando il template Protostar come predefinito il funzionamento riprende in modo regolare.

Tutto questo ha solo un nome: CONFLITTO di CODICE, in particolar modo a quel codice js tipico di jquery. Qualche volta il conflitto è generato da estensioni che usano JQUERY e da altre che usano MOOTOOLS (un'altra libreria JS non più molto in voga).

In un sito realizzato con joomla (ma anche con altri CMS) si utilizzano spesso delle estensioni che fanno uso di codice JS, in particolar modo utilizzando delle librerie o framework JQUERY, quindi ci possono essere più estensioni in un sito che utilizzano questa libreria innescando fenomeni di CONFLITTO.

Il problema poi si "amplifica" se si usano varie versioni del framework, generando una miriade di problemi e malfunzionamenti. Cosa fare allora per risolvere il problema, cosa c'è da sapere per far sì che tutto funzioni? Vediamolo in dettaglio creando un esempio ad HOC.

Sito realizzato con joomla e le seguenti estensioni:

  • template che utilizza jquery 1.6
  • slideshow inserito nella testata che usa jquery 1.7
  • modulo calendario di iCagenda che usa jquery 1.9
  • menù orizontale e verticale che utilizza Maxi menu CK che utilizzano jquery 1.8

Voglio ricordarvi in oltre che lo stesso Joomla utilizza una versione di jquery inserita in "/media/jui/js/jquery.min.js".

Quindi abbiamo una situazione dove nel codice ci saranno 5 riferimenti a 5 chiamate dello stesso framework ed in versioni differenti (in questo esempio non ci siamo fatti mancare niente!).

  • alcune estensioni vengono caricate all'interno di un iframe o di una finestra separata
  • altre estensioni hanno delle apposite opzioni nel backend per demandare all'utente la scelta se includere o meno le librerie jquery
  • altre dipendono da estensioni di terze parti il cui scopo è proprio quello di caricare le librerie richieste una volta per tutte
  • altre ancora preferiscono usare le proprie librerie personalizzate invece di librerie ben note
  • molte altre estensioni purtroppo non si curano affatto del problema, caricano avidamente quello che è richiesto per loro sempre, ed in alcuni sfortunati casi tendono a ricaricare i propri files una volta per ciascuna istanza sulla pagina!

Vediamo quali sono le possibili soluzioni e i diversi modi per aggirare il problema:

  1. individuare quali estensioni usano jquery; per farlo basterà premere i tasti della tastiera CTRL U, andando su modifica>>trova digitamo JQUERY e vedremo quante volte jquery viene richiamato e da chi.
  2. Se l'estensione lo permette disabilitiamo jquery; iCagenda (il modulo calendario), CK slider, Maxi menu CK e molte altre hanno uno switch che consente di disabilitare la libreria. In alternativa ci porteremo all'interno della directory dell'estensione con un client ftp e cercheremo i/il file jquery e li rinomineremo semplicemente, magari aggiungento un underscore all'inizio del nome (_jquery.js ad esempio).
  3. Installeremo jqueryeasy, un estensione che provvederà a caricare il framework e disabiliterà il file-libreria caricato da joomla, ma operemo così solo se quest'ultimo non soddisferà le richieste di tutte le altre estensioni.

JqueryEasy non solo provvederà a far funzionare correttamente le estensioni che richiedono la libreria, ma si occuperà di risolvere eventuali conflitti Jquery - MooTools

JqueryEasy va attivato a livello plug in e a livello funzione, questo vuol dire che oltre attivare il plug-in mettendolo nello stato pubblicato, all'interno dell'estensione andrà inserito il flag su attiva Jquery.

Ci sono altre impostazioni che potrebbero servirvi, come la scelta della versione di libreria (alcune estensioni ne richiedono una in particolare). Potrete scegliere inoltre se caricare i file da un sito esterno (come google), oppure caricare i file residenti nel vostro sito. Infine una serie di impostazioni avanzate potrebbero interessare chi di voi ha esigenze particolari, ma qui raccomando di smanettare solo se si sà cosa si sta facendo!