Bijna alle javascript libraries op het internet maken op één of andere manier wel gebruik van jQuery. Op een webpagina wordt de jQuery library voor deze libraries ingeladen. Wil je echter meerdere javascript libraries inladen, dan duurt het niet lang of je krijgt te maken met het volgende probleem:
Mogelijke javascript foutmeldingen door verschillende versies van jQueryDeze foutmeldingen komen doordat in de code van libraries de standaard $ afkorting voor jQuery wordt gebruikt en ze geprogrammeerd zijn voor een bepaalde versie van jQuery. Content Management Systemen, zoals WordPress en Drupal, laden een bepaalde versie van jQuery die afwijkt van een library versie met de bovenstaande foutmeldingen tot gevolg.
De oplossing: noconflict
Om dit probleem op te lossen bestaat de methode “noConflict”. zie https://api.jquery.com/jquery.noconflict. Door deze methode op de juiste wijze aan te roepen wordt het mogelijk om op één webpagina verschillende versies van jQuery te gebruiken en conflicten op te lossen.
Stap 1: laadt jQuery versie 1 in
Dit is meestal de standaard jQuery library waar CMS-en van gebruik maken. Deze versie staat het hoogst in de code.
Stap 2: laadt de libraries die werken met jQuery versie 1
Laadt vervolgens de libraries en de code in die gewoon werken met deze versie. Dit is vrij standaard.
Stap 3: laadt jQuery versie 2 in
Na deze libraries laadt je een andere versie van jQuery in. met de functie “$.fn.jQuery” kun je zien welke jQuery je inlaadt.
Stap 4: laadt de libraries die werken met jQuery versie 2
Laadt nu de libraries en de code in voor jQuery versie 2.
Stap 5: Gebruik jQuery.noconflict
Hierna dien je de noconflict methode aan te roepen om ervoor te zorgen dat code na de uitzonderings javascript weer jQuery versie 1 gaat gebruiken. Door de removeall boolean op true te zetten zullen alle aanroepen met de $ weer doen alsof versie 2 niet bestaat. Wil je jQuery versie 2 later toch nog gebruiken, dan kun je de aanroep koppelen aan een aparte variabele.
Dit alles ziet er in je code als volgt uit:
<html>
<head>
<title>jQuery noconflict example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<!-- Laadt jQuery versie 1 in op de webpagina -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<!-- Laadt jQuery libraries en code in die gebruik maken van versie 1-->
<script>
document.write('1: versie van dollar jQuery:' + $.fn.jquery + '<br>');
</script>
<!-- Laadt jQuery versie 2 in op de webpagina -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
document.write('2: versie van dollar jQuery:' + $.fn.jquery + '<br>');
</script>
<!-- Laadt jQuery libraries en code in die gebruik maken van versie 2-->
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- give $ back to original jquery -->
<script>
var jquery111 = jQuery.noConflict(true);
document.write('3: versie van dollar jQuery:' + $.fn.jquery + '<br>');
document.write('4: versie van jquery111 jQuery:' + jquery111.fn.jquery + '<br>');
</script>
</head>
<body>
<div>jQuery noconflict voorbeeld</div>
</body>
</html>
