Comment utiliser jQuery noConflict avec Bootstrap et Dojo
-
21-12-2019 - |
Question
J'ai écrit un widget qui utilise la dernière version de jQuery, Bootstrap et Dojo pour AMD.Le problème est qu'il sera intégré dans une page avec une ancienne version de jQuery.(page client, je ne peux pas contrôler)
J'essaie d'utiliser l'option noConflict de jQuery, mais je n'arrive pas à la faire fonctionner lorsque j'essaie de charger Bootstrap.
Fonctionnement simple de noConflict :
require(["jquery"], function (jQueryForPlugin) {
// create local scope var and resets the global $ and jQuery
// to their previous values, so we don't mess up client's page
var jQuery = jQueryForPlugin.noConflict(true);
var $ = jQuery;
// Now I can use $ like normal, and it will use my widget's jQuery version.
$('.some-class').hide();
Le problème vient d'autres bibliothèques, en particulier Twitter Bootstrap, lorsque je les charge, elles ne voient pas la nouvelle variable jQuery de portée.
Bootstrap ne peut pas voir les noConflict $ et jQuery locaux : JSFiddle de problème
require(["jquery"], function (jQueryForPlugin) {
// Resets the global $ and jQuery to their previous values.
var jQuery = jQueryForPlugin.noConflict(true);
var $ = jQuery;
require([ 'bootstrap'], function ( bootstrap) {
// ERR: Bootstrap load throws error because it can't find 'jQuery' in its scope.
La solution
Vanilla Bootstrap n'est pas compatible AMD.Vous devrez modifier un peu le JS de Bootstrap pour ajouter vous-même le passe-partout du module AMD, afin qu'il puisse require()
jQuery.
Voir également https://github.com/twbs/bootstrap/pull/12909
[ Modifier:Bootstrap v3.2.0 devrait être compatible AMD !Voir https://github.com/twbs/bootstrap/pull/13772 ]