Bootstrap génère une erreur non interceptée: le JavaScript de Bootstrap nécessite jQuery [fermé]

172

J'essaye d'utiliser Bootstrap pour créer une interface pour un programme. J'ai ajouté jQuery 1.11.0 à la <head>balise et j'ai pensé que c'était ça, mais lorsque je lance la page Web dans un navigateur, jQuery signale une erreur:

Uncaught Error: Bootstrap's JavaScript requires jQuery

J'ai essayé d'utiliser jQuery 1.9.0, j'ai essayé avec des copies hébergées sur plusieurs CDN, mais je ne peux pas le faire fonctionner. Quelqu'un peut-il signaler ce que je fais mal?

— Munim Munna
source

28

Inclure jQuery avant Bootstrap ...

— Adriano Repetti

Dans mon cas, j'ai installé jquery avant le bootstrap, puis cela a bien fonctionné. Le simple fait d'inclure avant le bootstrap n'a pas résolu l'erreur.

— Stuti Verma

Je mon cas, au lieu d'ajouter jquery dans le pied de page (comme dans le modèle bootstrap); Je l'ai ajouté dans l'en-tête. Résolu le problème.

— Adeel Raza Azeemi le

1

ajoutez simplement

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>

avant le script d'importation bootstrap. Copiez le dernier CDN ici: cdnjs.com/libraries/jquery

— Tina Lee

373

Essaye ça

Changez l'ordre des fichiers comme ci-dessous.

<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>

— Sridhar R
source

85

Ça ne marche pas pour moi. J'ai jQuery avant Bootstrap et j'obtiens quand même l'erreur!

— Vert du

2

a fonctionné mais a une barre de défilement horizontale en bas

— HimalayanCoder

1

Si cela ne fonctionne pas à partir de cela ... il se peut que jQuery soit installé via Bower et vous devrez peut-être regarder sous bower_components / jquery / dist / jquery.js .. la partie "dist" étant ce que j'avais oublié.

— Jax Cavalera

A travaillé pour moi pour un projet Django-Oscar. Cette erreur commence à apparaître hors du bleu. Je suppose que jouer avec un code totalement indépendant peut changer la séquence de rendu et déclencher cette erreur.

— MadPhysicist

apparemment, je n'ai pas remarqué que bootstrap.js était inclus deux fois - la première fois c'était bien avant la requête

— JJ Roman

91

Si vous êtes dans un environnement de navigateur uniquement , utilisez la solution de SridharR .

Si vous êtes dans un environnement Node / CommonJS + Browser (par exemple électron, node-webkit, etc.); la raison de cette erreur est que la logique d'exportation de jQuery vérifie d'abord module, et non window:

if (typeof module === "object" && typeof module.exports === "object") {
    // CommonJS/Node
} else {
    // window
}

Notez qu'il s'exporte via module.exportsdans ce cas; oui jQueryet $ne sont pas affectés à window.

Donc, pour résoudre ce problème, au lieu de <script src="path/to/jquery.js"></script>;

Attribuez-le simplement vous-même par une requiredéclaration:

<script>
    window.jQuery = window.$ = require('jquery');
</script>

REMARQUE: si votre application électronique n'en a pas besoin nodeIntegration, définissez-la sur falsepour ne pas avoir besoin de cette solution de contournement.

— Onur Yıldırım
source

3

window.jQuery = window.$ = require('jquery');cela a fonctionné pour moi en essayant d'assembler une version brunch avec jQuery 2 et Bootstrap 3. Cela ne m'a pris que quelques heures pour trouver votre réponse :(. Cette exigence change-t-elle dans les versions ultérieures de jQuery?

— rikkit

1

Je ne sais pas mais comme ce n'est pas un bug, je ne pense pas. Si votre application électronique n'en a pas besoin nodeIntegration, définissez-la sur falsepour ne pas avoir besoin de cette solution de contournement.

— Onur Yıldırım

1

Vous devez installer jquery en utilisant npm install jquerynot with bower.

— syodage du

1

Utile pour voir comment l'électron traite les bibliothèques différemment d'une application basée sur une fenêtre

— jwknz

Je ne comprends toujours pas, mais Laravel utilise la même approche: github.com/laravel/laravel/blob/v5.7.0/resources/js

— Ryan

14

vous devez d'abord charger jquery car bootstrap utilise les fonctionnalités de jquery. comme ça:

<!doctype html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" src="css/animate.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
        <link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="css/custom.css">

<!--   Shuffle your scripts HERE  -->
        <script src="js/jquery-1.11.0.min.js"></script>
        <script src="js/bootstrap.min.js"></script>
        <script src="js/wow.min.js"></script>
<!--   End  -->   

        <title>pyMeLy Interface</title>
    </head>
    <body>
        <p class="title1"><strong>pyMeLy</strong></p>
        <p class="title2"><em> A stylish way to view your media</em></p>
        <div style="text-align:center;">
            <button type="button" class="btn btn-primary">Movies</button>
            <button type="button" class="btn btn-primary btn-lg">Large button</button>
        </div>
    </body>
</html>

— 124
source

7

Vous devez ajouter JQuery avant d'ajouter bootstrap-

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Vivek Panday
source

4

Vous avez fourni un mauvais ordre pour JAVASCRIPT et BOOTSTRAP

par convention, le bootstrap doit suivre la définition du fichier jquery

<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>

— Mohit Singh
source

1

Dans mon cas, la solution est vraiment idiote et étrange.

Le code ci-dessous a été pré-rempli par le fichier _Layout.cshtml. (PAS écrit par moi)

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

Mais, lorsque j'ai vérifié dans le dossier Scripts, jquery-1.10.2.min.js n'était même pas disponible. Par conséquent, le code remplacé comme ci-dessous où jquery-1.9.1.min.js est un fichier existant:

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

— Ashok Kumar
source

1

J'utilise NodeJS et j'ai la même erreur. Comme les autres réponses, le problème était également dû au fait que JQuery devait être chargé avant Bootstrap; cependant, en raison des caractéristiques de NodeJS, cette modification a dû être appliquée dans le fichier pipeline.js .

Le changement dans pipeline.js était comme ceci:

var jsFilesToInject = [
  // Dependencies like jQuery, or Angular are brought in here
  'js/dependencies/angular.1.3.js',
  'js/dependencies/jquery.js',
  'js/dependencies/bootstrap.js',
  'js/dependencies/**/*.js',
];

J'utilise également grunt pour m'aider, et cela a automatiquement changé l'ordre dans la page html principale:

<!--SCRIPTS-->
  <script src="/js/dependencies/angular.1.3.js"></script>
  <script src="/js/dependencies/jquery.js"></script>
  <script src="/js/dependencies/bootstrap.js"></script>
  <!-- other dependencies -->
<!--SCRIPTS END-->

J'espère que ça aide! Vous n'avez pas dit quel était votre environnement, j'ai donc décidé de publier cette réponse.

— Ernani
source

1

Si vous utilisez require.jsque vous devez ajouter window.$ = window.jQuery = require('jquery')dans app.js

OU vous pouvez faire charger le fichier dépendant après le chargement du fichier parent .. comme ci-dessous le concept

require.config({
    baseUrl: "scripts/appScript",
    paths: {
        'jquery':'jQuery/jquery.min',
        'bootstrap':'bootstrap/bootstrap.min' 
    },
   shim
    shim: {
        'bootstrap':['jquery'],
        },

    // kick start application
    deps: ['app']
});

Ci-dessus le code indiqué qui bootstrapdépend de Jquerydonc j'ai ajouté shimet le rendre dépendant

— SantoshK
source

0

Si votre code semble bon, vérifiez que jQuery a bien été chargé sur votre serveur. Dans mon cas, les fichiers jQuery ont été publiés sur le serveur par mon IDE, mais le serveur Web n'avait qu'un stub de fichier de 0 Ko. En l'absence de contenu, le serveur n'a pas réussi à fournir le fichier au navigateur.

Après avoir republié le fichier et vérifié que le serveur a effectivement reçu l'intégralité du fichier, ma page Web a cessé de me donner l'erreur.

— Zarepheth
source

0

Vous devez ajouter JQuery js avant d'ajouter le fichier bootstrap js, car BootStrap utilise la fonction jqueries. Assurez-vous donc de charger d'abord jquery js, puis de bootstap js.

<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>

<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>

— Jani Devang
source

0

Si cela se produit uniquement sur l'intranet IE, vérifiez les paramètres de compatibilité et décochez "Afficher les sites intranet en mode de compatibilité".

IE -> paramètres -> compatibilité

— Davut Gürbüz
source

0

Sur la documentation officielle: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

<head>
  <script>
  window.nodeRequire = require;
  delete window.require;
  delete window.exports;
  delete window.module;
  </script>
  <script type="text/javascript" src="jquery.js"></script>
</head>

— Fabio Souza
source

1

Je l'ai corrigé sur angular.json avec le code "" scripts ": [" node_modules / jquery / dist / jquery.min.js "," node_modules / bootstrap / dist / js / bootstrap.min.js "]"

— AntWo

0

J'avais essayé presque toutes les méthodes ci-dessus.

Enfin corrigé en incluant le

script src="{%static 'App/js/jquery.js' %}"

juste après le chargement des fichiers statiques ie {% load staticfiles %}dans base.html

— Kanika
source

0

Après avoir lutté avec ce problème, j'ai pris trois étapes:

Utilisez les versions de jQuery entre 1.9.0 et 3.0.0
Déclarez le fichier jQuery avant de déclarer le fichier Bootstrap
Déclarez ces deux fichiers de script au bas des <body></body>balises plutôt que dans le fichier <head></head>. Cela a fonctionné pour moi, mais il peut y avoir différents comportements en fonction du navigateur que vous utilisez.

— Karisno1
source