Uncaught Error: Bootstrap's JavaScript requires jQuery

Question

First of all, thanks for your time looking at my problem! Seccond, I have seen other questions like mine (for example: Uncaught Error: Bootstrap's JavaScript requires jQuery with requirejs), but they didn't awnser my question.

So, here is the <head> of my <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>

as you can see I have included jquery and the bootstrap links. but even so... I get this error message: Uncaught Error: Bootstrap's JavaScript requires jQuery (anonymous function) @ bootstrap.min.js:6

and here the error

Do I miss something here?

move jquery before boostrap.

jcubic
– jcubic

2016-02-03 13:10:07 +00:00
Commented Feb 3, 2016 at 13:10 — jcubic
– jcubic, Commented Feb 3, 2016 at 13:10
hahaha... so logical. THANKS a lot!! that did the trick ;)

OrangeCode
– OrangeCode

2016-02-03 13:13:56 +00:00
Commented Feb 3, 2016 at 13:13 — OrangeCode
– OrangeCode, Commented Feb 3, 2016 at 13:13

Deepak Arora · Accepted Answer · 2016-02-03 13:22:05Z

23

As I can see in your code you have added jquery Js after the Bootstrap js. You need to include jquery js before adding bootstrap js. Your problem will fix, because bootstrap requires Jquery file.

<!-- 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>

edited Feb 3, 2016 at 13:22

answered Feb 3, 2016 at 13:13

Deepak Arora

4402 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MD Ashik Over a year ago

ha ha ha ha really joss answer

I wrestled a bear once. · Accepted Answer · 2016-02-03 13:12:05Z

You need to put jQuery above the 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 -->

Community · Accepted Answer · 2020-02-04 01:00:35Z

After sure you included jquery library and bootstrap using these commands?:

First, install jQuery using npm as follows: npm install jquery --save
Second, install Bootstrap using npm as follows: npm install --save bootstrap@3

My problem was in :

angular.json just change sorting for scripts files included under project .

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

to be like this :

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

Collectives™ on Stack Overflow

Uncaught Error: Bootstrap's JavaScript requires jQuery

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Linked

Related