web-dev-qa-db-fra.com

Erreur non détectée: le JavaScript de Bootstrap nécessite jQuery

Tout d'abord, merci pour votre temps à regarder mon problème! Seccond, j'ai vu d'autres questions comme la mienne (par exemple: Erreur non détectée: le JavaScript de Bootstrap nécessite jQuery avec requirejs ), mais ils n'ont pas répondu à ma question.

Voici donc le <head> De mon <html>

<!DOCTYPE html>
    <!-- metadata -->
    <meta charset="UTF-8">

        <!-- responsive -->
            <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- [/] responsive -->

    <!-- [/] metadata -->




    <!-- links -->

        <!-- bootstrap -->

        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

        <!-- Optional theme -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

        <!-- [/] bootstrap -->

    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- [/] links -->




    <!-- script -->
    <!--<script src="js/action.js"></script>-->

        <!-- jquery -->
        <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <!-- [/] jquery -->

        <!-- bootstrap -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
        <!-- [/] bootstrap -->

    <!-- [/] script -->




    <title>standaard html</title>

</head>




<body>

    <!-- hoofdnavigatie -->
    <nav class="navbar navbar-default navbar-fixed-top      bas_hoofdnav">

        <!-- logo in menubalk -->
        <a class="navbar-brand" href="#">

            <img src="afb/logo/logo.png" class="bas_hoofdnav_logo" alt="Brand" >

        </a>
        <!-- [/] logo in menubalk -->




        <ul class="nav nav-pills navbar-right       bas_hoofdnav_knoppen">

            <li role="presentation" class="active       bas_hoofdnav_knp_actief"><a href="#" onclick="return false;">start</a></li>
            <li role="presentation"><a href="#">over ons</a></li>
            <li role="presentation"><a href="#">diensten</a></li>
            <li role="presentation"><a href="#">winkel</a></li>
            <li role="presentation"><a href="#">contact</a></li>

        </ul>

    </nav>
    <!-- [/] hoofdnavigatie -->

</body>

comme vous pouvez le voir, j'ai inclus jquery et les liens bootstrap. mais même ainsi ... je reçois ce message d'erreur: Uncaught Error: Bootstrap's JavaScript requires jQuery (anonymous function) @ bootstrap.min.js:6

et ici l'erreur

Dois-je manquer quelque chose ici?

8
OrangeCode

Comme je peux le voir dans votre code, vous avez ajouté jquery Js après le Bootstrap js. Vous devez inclure jquery js avant d'ajouter bootstrap js. Votre problème sera résolu) , car bootstrap nécessite un fichier Jquery.

<!-- First include jquery js -->
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
18
Deepak Arora

Vous devez placer jQuery au-dessus du Bootstrap JS.

    <!-- jquery -->
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <!-- [/] jquery -->

    <!-- bootstrap -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- [/] bootstrap -->
6

Après vous être assuré d'avoir inclus la bibliothèque jquery et bootstrap à l'aide de ces commandes:

Tout d'abord, installez jQuery en utilisant npm comme suit: npm install jquery — save
Deuxièmement, installez Bootstrap en utilisant npm comme suit: npm install --save bootstrap@3

Mon problème était dans:

angular.json changez simplement le tri des fichiers de scripts inclus sous project.

     "scripts": [
          "node_modules/jquery/dist/jquery.js"
          "node_modules/bootstrap/dist/js/bootstrap.js",
        ]

être comme ça:

     "scripts": [
          "node_modules/bootstrap/dist/js/bootstrap.js",
           "node_modules/jquery/dist/jquery.js"
        ]
0
Abd Abughazaleh