Of je nou voor het eerst een WordPress fout tegenkomt of er al tientallen hebt gezien, de “jQuery is Not Defined” tegenkomen op je website is nooit leuk. Het kan een melding zijn die voor een hoop zorgen en verwarring zorgt. Gelukkig is het tegelijkertijd een vrij gebruikelijke foutmelding die websites die jQuery gebruikers bijna allemaal wel eens tegenkomen.

Misschien is je website offline, en wanneer je naar je browserconsole kijkt voor fouten, zie je daar “jQuery is Not Defined” staan. Het vinden van de foutmelding is altijd de eerste stap naar de oplossing, dus goed bezig!

De volgende stap is natuurlijk het daadwerkelijk oplossen. Aangezien dit één van de eenvoudigste JavaScript fouten is om op te lossen, zal het je niet heel veel tijd kosten.

In dit artikel leggen we je alles uit wat je moet weten om de foutmelding snel op te lossen. Dit begint met weten wat de foutmelding betekent en waarom het ontstaan is, zodat je de fout in de toekomst kan worden voorkomen. Als laatste lopen we de stappen door voor het oplossen van de foutmelding.

Snel beginnen dus!

Bekijk onze videogids voor het oplossen van de “jQuery Is Not Defined” foutmelding

Wat is de “jQuery is Not Defined” foutmelding?

De handige console log in je browser is waar je waarschijnlijk de foutmelding gevonden hebt. Maar het is geen heel duidelijke foutmelding. Wat betekent “jQuery is Not Defined” eigenlijk?

In normale taal probeert deze foutmelding aan te geven dat een onderdeel van je website, wellicht een plugin, jQuery nodig heeft om te kunnen functioneren. Maar toen de browser de website probeerde te laden en om die specifieke jQuery vroeg, was dit om een of andere reden niet beschikbaar.

Deze fout kan je website mogelijk ook blokkeren voor potentiële bezoekers. Aangezien ongeveer 78% van de websites op het internet gebruik maken van jQuery, is dit een fout die vrij vaak voorkomt.

“jQuery is not defined” error in de console log

Mogelijke oorzaken van de “jQuery is Not Defined” fout

Deze error kan nogal een nare verrassing zijn. Je website werkte gisteren nog helemaal zonder problemen, dus wat is er misgegaan? Het kan nogal verwarrend zijn.

Er zijn een aantal verschillende mogelijke oorzaken van de “jQuery is Not Defined” fout:

  1. Oude plugins op je WordPress website kunnen een conflict met nieuwere plugins veroorzaken. Als je recent nieuwe plugins hebt geïnstalleerd of geactiveerd of een aantal plugins op je website al een poos niet hebt geüpdatet, kan dit de oorzaak zijn.
  2. Een trage hostingomgeving kan ervoor zorgen dat het te lang duurt voordat jQuery uitgevoerd wordt wanneer daarom gevraagd wordt. Controleer de capaciteit van je server en de errorlog om dit te checken.
  3. JavaScript draait al op je website voordat jQuery volledig geladen is. Of wellicht wordt een JavaScript bestand niet goed geladen bij het laden van de pagina.
  4. Het CDN dat je gebruikt om de prestaties van je website te verbeteren kan je server niet bereiken. Als je geen CDN gebruikt, kan je die mogelijkheid natuurlijk snel uitsluiten.
  5. Er zit een fout of typefout in je jQuery. Wellicht heeft er iemand recentelijk een bestand of plugin bijgewerkt, waardoor er nu een conflict is ontstaan.

Het oplossen van de “jQuery is Not Defined” error

Voordat we de oplossing gaan bekijken, raden we je altijd aan om eerst een backup van je website te maken voordat je aan de slag gaat met code! Zelfs de meest ervaren developers maken wel eens een foutje, en door een backup achter de hand te hebben voorkom je dat je belangrijk werk kwijtraakt.

Als je de mogelijkheid hebt, kan je het beste proberen eerst de fout op te lossen op een development site of in een staging omgeving. Klanten bij Kinsta kunnen dit doen, de oplossing checken, en dan de veranderingen naar live pushen.

Nadat je deze maatregelen hebt genomen, is het tijd voor de oplossing van je foutmelding.

Het oplossen van de fout vereist enige ervaring met het toevoegen, verwijderen en bewerken van code. Maar maak je geen zorgen, je hoeft verder zelfs niks te programmeren. Het zou wel handig zijn als je toegang kan krijgen tot de code van je website, via SFTP of via je hostingomgeving.

Het is namelijk niet ideaal om code te bewerken via de code editor in het WordPress dashboard. Als je nog handige tekstbewerker hebt, is dit een goed moment om er één te installeren.

Enkele mogelijkheden die je kan gebruiken om de fout op te lossen en je website weer online te krijgen voor je bezoekers.

Methode 1: gebruik het tabblad Network om te controleren of jQuery kan laden

Kijk naar het tabblad Network  in de devtools van je browser om te controleren dat jQuery geladen wordt. Dit is alvast een goede plek voor een snelle controle.

Je kan ook meerdere plugins en thema’s controleren die de fout mogelijk veroorzaken. Bekijk de code van je website, en controleer dat jQuery goed wordt gebruikt. Idealiter wordt het slechts één keer geladen.

Als de jQuery library nog niet gebruikt wordt, voeg dit dan toe aan je wp_enqueue_script()  functie met de volgende code:

wp_enqueue_script( 'tt-mobile-menu', get_template_directory_uri() .
'/js/mobile-menu.js', array('jQuery'), '1.0', true );

Je kan deze code vinden door naar de map wp-includes te gaan en dan het bestand script-loader.php te openen. Als dit niet werkt, of als de jQuery library al opgenomen is, kan je doorgaan naar de volgende aanpak.

Zo ziet de code er uiteindelijk uit in het bestand script-loader.php
Zo ziet de code er uiteindelijk uit in het bestand script-loader.php

Methode 2: controleer dat jQuery geladen wordt

Wellicht krijg je de fout “jQuery is Not Defined” te zien omdat jQuery wel genoemd wordt, maar niet daadwerkelijk geladen wordt. Controleer dat dit wel zo is, door de bron voor het script te zoeken en de URL in een nieuw tabblad van je browser te plakken.

Als de  <script src= er bijvoorbeeld zo uitziet:

Het stukje tekst dat je moet zoeken voor de URL die je kan testen
Het stukje tekst dat je moet zoeken voor de URL die je kan testen

Dan kan je het stukje http://code.jquery.com/jquery-1.11.2.min.js in een nieuw tabblad of venster. Als het jQuery bestand gewoon laadt en alle inhoud weergegeven wordt, kan je dit probleem uitsluiten.

Methode 3: gebruik jQuery gehost door Google, met een lokale reserve

Dit is ideaal om te gebruiken bij je JavaScript, omdat het uitvoeren van jQuery op de localhost de algehele prestaties van je website aanzienlijk kan verbeteren. Hierdoor voorkom je ook CDN jQuery problemen bij het laden.

// Fall back to a local copy of jQuery
window.jQuery || document.write(''))

Zo zou je code eruit moeten zien in je code editor. Vergeet de opmerking niet!
Zo zou je code eruit moeten zien in je code editor. Vergeet de opmerking niet!

Methode 4: voeg een stukje code toe aan het bestand wp-config.php

Als de bovenstaande opties niet werken, kan je het bestand  wp-config.php openen en het volgende stuk code daar helemaal in plakken:

/** Absolute path to the WordPress directory. */
if ( !defined('ABSPATH') )
define('ABSPATH', dirname(__FILE__) . '/');
define('CONCATENATE_SCRIPTS', false);

Zo ziet het stukje code eruit in je wp-config.php bestand
Zo ziet het stukje code eruit in je wp-config.php bestand

Methode 5: Voeg de jQuery library handmatig toe

Als laatste optie kan je direct naar het bestand header.php gaan en de jQuery library toevoegen.

Zo doe je dat:

  1. Ga eerst naar de Google Hosted Libraries en kopieer de volledige laatste versie van de jQuery library.
  2. Open vervolgens het bestand header.php dat je in je map themes kan vinden.
  3. Voeg de jQuery library die je net gekopieerd hebt toe. Zorg ervoor dat je dit doet direct na de head tag.
  4. Sla het bestand vervolgens op.
Zo ziet het stukje code eruit in je header.php bestand
Zo ziet het stukje code eruit in je header.php bestand

Samenvatting

Met het volgen van deze stappen zou je de “jQuery is Not Defined” fout moeten kunnen oplossen en je website weer toegankelijk kunnen maken.

Aangezien dit probleem meestal ontstaat doordat je browser geen toegang heeft tot je jQuery library, is er een beperkt aantal mogelijke oplossingen. De meeste mensen zullen merken dat bovenstaande methodes het probleem oplossen.

Werken bovenstaande methoden nog niet om de foutmelding op te lossen, dan is het een goed idee om contact op te nemen met je hostingprovider voor meer ondersteuning.

Ben je deze fout al wel eens tegengekomen? Welke oplossing heb jij gebruikt? Laat het ons weten in de reacties hieronder!

 

Allie Nimmons

Allie Nimmons is een WordPress content schrijver en producent met 6 jaar ervaring in het bouwen van sites. Ze heeft WordPress-gerichte educatieve content gepubliceerd bij Automattic, LinkedIn Learning, GiveWP, GoDaddy, WP Buffs en iThemes.