Bootstrap JS not loading

Question

The solution to this problem might be very trivial but its got me banging my head on walls! Bootstrap's js files are not loading on my web page for some reason.

I simplified the page to the bare minimum and here's the code:

<!DOCTYPE html>

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="dropdown">
                <button class="btn btn-default dropdown-toggle" type="button" id="cz" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                Dropdown
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu" aria-labelledby="cz">
                    <li><a href="#">Option 1</a></li>
                    <li><a href="#">Option 2</a></li>
                    <li><a href="#">Option 3</a></li>
                </ul>
            </div>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
        <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    </body>
</html>

Now when I click on the button, nothing happens and I don't see the dropdown. When I checked the js files loaded(through browser inspect element), I see that only JQuery has loaded.

If I remove JQuery, I get the correct error that Bootstrap requires Jquery. I've created a codepen and it works perfectly fine on it. Could someone help me with this please?? :(

score 3 · Answer 1 · edited Aug 19 '16 at 12:15

3

Close script tag

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>

edited Aug 19 '16 at 12:15

Ivanka Todorova

9,964
16
66
103

answered Aug 19 '16 at 12:15

Lalji Tadhani

14,041
3
23
40

YESSS that did it. Thank you so much! So is it that the script tag can't be closed using '/>'? – javaGirl243 Aug 19 '16 at 12:17
@javaGirl243: In theory it could, but browsers insist on an opening _and_ a closing tag for script elements. – CBroe Aug 19 '16 at 12:21

score 3 · Accepted Answer · edited May 23 '17 at 12:10

3

you didn't close first tag. it should be,

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

UPDATE : if you are thinking why self closing script tags are not working, refer this. Why don't self-closing script tags work?

edited May 23 '17 at 12:10

Community

1
1

answered Aug 19 '16 at 12:17

Chathura Buddhika

2,067
1
21
35

when I starting to comment it doesn't have any answers. :( – Chathura Buddhika Aug 19 '16 at 12:19
@ZakariaAcharki he probably opened the answer window before seeing that it was answered already. No need for hate and vote down. The author of the question will choose the appropriate answer. – Zirbo Filip Aug 19 '16 at 12:19
1

@ZakariaAcharki Well then I apologize friend :) – Zirbo Filip Aug 19 '16 at 12:22

Bootstrap JS not loading

2 Answers2