web-dev-qa-db-fra.com

Bootstrap lève une erreur non récupérée: jQuery nécessite JavaScript de Bootstrap

J'essaie d'utiliser Bootstrap pour créer une interface pour un programme. J'ai ajouté jQuery 1.11.0 à la balise <head> et j'ai pensé que c'était le cas, 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 indiquer ce que je fais mal?

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3
149
user3327457

Essaye ça 

Changer l'ordre des fichiers devrait être 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>
331
Sridhar R

Si vous êtes dans un environnement Browser-Only, utilisez la solution SridharR .

Si vous êtes dans un environnement de navigateur Node/CommonJS + (par exemple, electron, 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.exports dans ce cas; so jQuery et $ ne sont pas attribués à window. 

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

Attribuez-le simplement vous-même à l'aide d'une instruction require:

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

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

76
Onur Yıldırım

vous devriez d'abord charger jquery car bootstrap utilise les fonctionnalités de jquery ..__ comme ceci:

<!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>
11
N J

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>
6
Vivek Panday

Vous avez fourni une mauvaise commande pour JAVASCRIPT et BOOTSTRAP 

par convention, 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>
2
Mohit Singh

Dans mon cas, la solution est vraiment stupide 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>
1
Ashok kumar

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

ORvous pouvez charger un fichier dépendant après le chargement du fichier parent. 

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

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

Le code ci-dessus montre que bootstrap dépend de Jquery. J'ai donc ajouté shim et le rend dépendant 

1
SantoshK

J'utilise NodeJS et j'ai la même erreur. Comme les autres réponses, le problème était aussi 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 aussi grunt pour 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, alors j'ai décidé de poster cette réponse.

1
Ernani

Sur les documents officiels: 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>
0
Fabio Souza

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 ne contenait qu'un fichier de remplacement de 0 Ko. En l'absence de contenu, le serveur n'a pas pu transmettre le fichier au navigateur.

Après avoir republié le fichier et vérifié que le serveur avait bien reçu l’ensemble du fichier, ma page Web a cessé de me donner l’erreur.

0
Zarepheth

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

Enfin résolu en incluant le 

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

juste après le chargement des staticfiles i.e {% load staticfiles %} dans base.html

0
kanika

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

IE -> paramètres -> compatibilité 

 enter image description here

0
Davut Gürbüz

Vous devez ajouter JQuery js avant d'ajouter le fichier bootstrap js, car BootStrap utilise la fonction jquery. Assurez-vous donc de charger jquery en premier, puis d’amorcer le fichier js.

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

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

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

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