7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. jQuery

Perché jQuery non è definito?

Scroll to top
Read Time: 10 mins

Italian (Italiano) translation by Cristiano Verondini (you can also view the original English article)

Per quelli che, fra i nostri lettori, hanno esperienza di scrittura di codice JavaScript (e gli sviluppatori avanzati jQuery) è probabile che questo articolo non sarà di molto aiuto. Quelli su cui vorremmo invece concentrarci sono gli sviluppatori alle prime armi con jQuery.

Forse hai seguito diversi tutorial su JavaScript, costruito alcuni piccoli siti o lavorato su progetti che incorporano al loro interno, in qualche modo, JavaScript ed adesso sei pronto per cominciare con un nuovo framework o una nuova libreria.

Assumerò quindi, visto che stai leggendo questo tutorial, che tu sia interessato a cominciare a lavorare con jQuery. O forse hai già cominciato a lavorare con jQuery ma ti sei scontrato con qualche ostacolo che ne ha rallentato l'apprendimento.

Può essere frustrante cercare di imparare qualcosa di nuovo, incontrare qualche ostacolo e ricominciare da capo. Il lato positivo è però la possibilità che qualcun altro abbia già risolto il problema con cui ti sei scontrato.

Questo non è necessariamente vero quando si parla di applicazioni complesse ma quando si sta imparando qualcosa di nuovo non sarai sicuramente stato il primo a trovare delle difficoltà.  A questo punto sarai probabilmente in grado di apprendere qualcosa da qualcuno che ha già seguito quella strada.

E questo è esattamente quello di cui parleremo in questo tutorial. Nello specifico parleremo del problema che si manifesta attraverso questo messaggio di errore:

Uncaught ReferenceError: jQuery is undefined

Comprendere il problema

Prima di capire come risolvere il problema, cerchiamo di capire esattamente che cosa è successo. Questo perché per poter capire come trovare una soluzione è necessario prima capire a fondo il problema. Solamente una volta compreso il problema saremmo in grado di risolverlo.

Uncaught ReferenceError jQuery is not definedUncaught ReferenceError jQuery is not definedUncaught ReferenceError jQuery is not defined

Se non hai particolare familiarità con JavaScript è probabile che tu sappia quanto può confondere undefined. In particolare, stiamo parlando di un valore primitivo o dell'oggetto globale con questo nome? Questa differenza è però al di là degli scopi di questo articolo. Il lato positivo è però che anche se non sei in grado di comprendere la differenza questo non significa che tu non sia in grado di individuare il problema.

Creazione di una Sandbox (ambiente di lavoro)

Cominciamo innanzitutto preparando una pagina che includa tutto quello che è necessario per poter lavorare con jQuery e poter riprodurre l'errore cui abbiamo prima fatto riferimento.

Creiamo quindi sulla macchina locale un documento HTML al cui interno inseriremo quello che segue. È importante che questo documento sia in qualche modo accessibile tramite un web browser.

Nota che stiamo inserendo alcuni riferimenti a documenti CSS all'interno del documento. Questo non è strettamente necessario. Se però volessi seguire passo passo questo tutorial, puoi scaricare un archivio di tutto quello che è necessario utilizzando il link che trovi alla destra di questo post.

Nonostante l'inclusione dei CSS sia opzionale, altrettanto non può dirsi per quello che riguarda le inclusioni di documenti JavaScript. Faccio notare che stiamo includendo la libreria jQuery attraverso un servizio CDN (content-delivery network - una serie di server che ospitano contenuti rendendoli disponibili alla rete, ndt) cosicché non abbiamo la necessità di scaricarli e copiarli all'interno del nostro computer.

Una volta fatto questo creiamo un documento JavaScript che potremmo usare per ricreare la condizione di errore di cui abbiamo parlato sopra ed all'interno del quale scriveremo codice che consenta di risolvere il problema. Chiameremo questo documento main.js.

Dopo aver fatto questo includiamo questo documento all'interno del documento HTML in modo che il risultato sia simile a questo:

Se a questo punto carichiamo il documento HTML appena creato all'interno di un browser dovremmo vedere qualcosa di molto simile all'immagine della console qui sopra.

Verifica che il nostro documento JavaScript sia stato caricato

Prima di procedere oltre vediamo di assicurarci che il documento JavaScript che abbiamo creato sia stato caricato correttamente. Per fare questo scriviamo il codice necessario a mostrare un semplice alert ogni volta che la pagina viene ricaricata.

JavaScript LoadedJavaScript LoadedJavaScript Loaded

Apportiamo quindi le seguenti modifiche nel documento JavaScript:

Riordiniamo poi le inclusioni dei documenti JavaScript passando da:

a:

Parleremo di questa modifica fra poco.

A questo punto ricarichiamo la pagina. Se le istruzioni sono state seguite correttamente a questo punto dovremmo vedere una finestra di dialogo simile a quella mostrata sopra. Se così non fosse sarà necessario controllare che il codice HTML e JavaScript sia stato scritto in modo corretto, oppure è possibile scaricare un archivio che troverai fra i documenti allegati a questo tutorial.

Riprodurre il problema

Adesso che abbiamo la nostra Sandbox funzionante possiamo cominciare ad analizzare in modo più approfondito il problema. In particolare vediamo alcuni problemi che possono nascere utilizzando jQuery.

1. jQuery viene caricato dopo il codice che lo usa

Qualunque sia il motivo, una volta che hai scelto di usare jQuery in un progetto la libreria jQuery diventa, per il tuo progetto, una 'dipendenza' (un componente esterno senza il quale il progetto non è in grado di funzionare, ndt). Ogni volta che si lavora con delle dipendenze è necessario assicurarsi che queste vengano caricate prima del codice che le usa. Solo in questo modo infatti sarà possibile utilizzarne le funzionalità.

Se fai caso al primo frammento di codice qui sopra, il nostro documento JavaScript è stato caricato prima di jQuery. Questo significa che qualsiasi cosa vogliamo fare usando jQuery non può essere fatta. Il motivo per il quale viene visualizzato il messaggio di errore (undefined) di cui abbiamo parlato prima e proprio perché letteralmente jQuery non è ancora definita.

In parole povere il codice che abbiamo scritto non ha la minima idea dell'esistenza di jQuery poiché la libreria deve ancora essere caricata. Fortunatamente la soluzione al problema è estremamente semplice. È sufficiente infatti cambiare l'ordine di caricamento dei documenti JavaScript in modo che jQuery venga caricato prima del nostro documento JavaScript.

Dopo questa modifica il documento HTML dovrebbe essere simile a questo:

A questo punto il codice dovrebbe funzionare e l'errore di cui sopra sparire. Questo è probabilmente il problema più semplice da risolvere ed il meno comune da trovare poiché è generalmente sottinteso che la libreria jQuery debba essere caricata come prima dipendenza.

2. Un plugin o un documento che genera un conflitto

Quando si lavora con jQuery spesso gli sviluppatori sono soliti ridefinire la funzione $ cosicché non entri in conflitto con qualcos'altro utilizzato dal loro codice.

In particolare, jQuery è il nome della funzione principale definita all'interno della libreria jQuery. La libreria usa però $ (che è un nome di funzione valido in JavaScript, ndt) come sinonimo per la funzione jQuery poiché è più corto e semplice da scrivere. Questa convenzione rende il codice più semplice da scrivere e da leggere.

Eliminazione dei conflitti

Purtroppo jQuery non è l'unica libreria che usa questa tecnica oppure può succedere che altri sviluppatori abbiano la necessità di usare lo stesso nome $ per un'altra funzione. Per poter fare questo è necessario usare jQuery.noConflict().

Citando direttamente dalla documentazione delle API jQuery:

Molte librerie usano $ come nome di variabile o funzione esattamente come fa jQuery. Nel caso di jQuery, $ è semplicemente un sinonimo di jQuery. In questo senso è possibile accedere a tutte le funzionalità della libreria senza dover usare $.
Nel caso in cui esista la necessità di usare assieme a jQuery un'altra libreria JavaScript è possibile lasciare che sia quest'ultima ad usare $ semplicemente invocando la funzione $.noConflict(). Infatti, durante l'inizializzazione, jQuery memorizza un riferimento a quanto associato a $. L'invocazione della funzione noConflict() si limita a ripristinare questa associazione.

Quindi da qualche parte, nel codice incluso, esiste la possibilità che un altro sviluppatore abbia effettuato una chiamata a questa funzione. Per questo motivo potrebbe succedere che la funzione $ non sia accessibile. Potrebbe addirittura essere che invochi un'altra funzione che non sia jQuery o potrebbe chiamare una funzione non definita (undefined).

Nel nostro caso siamo interessati alla seconda ipotesi. Per risolvere questo problema è possibile utilizzare un paio di soluzioni. È possibile cercare di riavere accesso alla funzione $ semplicemente invocando nuovamente jQuery.noConflict() . Nonostante questa soluzione possa risolvere il problema potrebbe anche scatenare un altro problema analogo in qualche altro framework, libreria o semplicemente codice incluso.

Per questo motivo la mia raccomandazione è quella di usare questo metodo solamente quando si è assolutamente sicuri di quello che si sta facendo e del fatto che in questo modo non si vada ad alterare il funzionamento di qualcos'altro.

Scoping corretto di $

Cosa succede quando non si è sicuri che la modifica non altererà il comportamento di qualcos'altro? Cosa è possibile fare? In questo caso è possibile fare in modo che il proprio codice sia eseguito usando la funzione jQuery e che quest'ultima venga acceduta tramite il sinonimo $ solamente all'interno del proprio codice.

Sembra complesso? Non ti preoccupare. Non è così male. Modifichiamo il nostro codice JavaScript in modo che contenga quanto segue:

Bene, ecco quello che succede:

  1. Abbiamo dichiarato una funzione anonima che accetta un solo parametro (nel nostro caso jQuery).
  2. La funzione viene passata come parametro e il nome con cui viene visto questo parametro all'interno della funzione è $.

Questo significa che siamo liberi di usare la funzione $ dove vogliamo senza di fatto interferire con ogni altra funzione che si chiami nello stesso modo. Infatti questo è in un certo senso il modo de-facto di scrivere codice che usa jQuery.

Non tutti usano questo approccio ma è comunque molto comune e soprattutto estremamente sicuro e consente di evitare una delle principali cause della comparsa dell'errore undefined.

3. Ci sono altri modi?

Sicuramente. Il problema in questo caso è però come essere sicuri di elencarli tutti. La verità è che non so se sia realmente possibile poiché ad un certo punto la complessità dei progetti web diventa così grande che cercare di identificare dove potrebbero nascere problemi di questo tipo diventa veramente difficile.

Inoltre, cercare di modificare jQuery affinché faccia esattamente quello che vogliamo potrebbe finire col causare la comparsa di problemi in qualcos'altro (e questo non è mai una buona cosa).

Per questo motivo è meglio adottare una soluzione che sappiamo essere sicura (come il metodo della funzione anonima visto sopra) e non abusare dell'utilizzo della funzione noConflict(). Dopotutto una parte delle buone regole nella scrittura di codice è non solo comportarsi in modo rispettoso nei confronti di codice scritto da altri, ma anche scrivere codice con il quale altri possano comportarsi allo stesso modo.

Conclusioni

Come delineato sopra esistono differenti cause che possono generare il messaggio jQuery is undefined nella console. Abbiamo cercato di analizzare alcuni dei più comuni problemi negli esempi visti sopra.

Ciò detto è difficile essere esaustivi poiché è praticamente impossibile coprire tutte le casistiche dovute alle possibili combinazioni e permutazioni che possono apparire nel codice. Motivo di errore potrebbe essere l'uso di una libreria che va in conflitto, magari un plugin che è stato scritto in modo errato o semplicemente non è stato stabilito il corretto ordine fra le dipendenze.

Qualunque sia il motivo spero che questo articolo sia riuscito a spiegare qual è il problema e rendere più semplice la sua individuazione e risoluzione. Nel caso in cui tu abbia trovato una soluzione che non è fra quelle elencate, puoi lasciarlo scritto nei commenti.

Inoltre, se avessi altre domande, puoi lasciarle nei commenti qui sotto. Cercherò di rispondere a tutti nei limiti delle mie possibilità.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.