Problems setting up Bootstrap framework

Question

I'm having problems setting up the Bootstrap framework to my Web project.

1 - I have downloaded the Bootstrap CSS and JS files (bootstrap.css, bootstrap.js) and JQuery libray and have added the files to my project.

2 - I have imported the files on my JSP.

3 - I coded a bootstrap functionality (dropdown menu) and when I access the JSP, I see the following on Chrome console:

Uncaught TypeError: undefined is not a function bootstrap.js:29
(anonymous function) bootstrap.js:29
(anonymous function) bootstrap.js:60

and

Uncaught TypeError: Object [object Object] has no method 'dropdown' main.jsp:25
(anonymous function) main.jsp:25
jQuery.event.dispatch jquery.js:4624
elemData.handle jquery.js:4292
jQuery.event.trigger jquery.js:4533
(anonymous function) jquery.js:5235
jQuery.extend.each jquery.js:384
jQuery.fn.jQuery.each jquery.js:137
jQuery.fn.extend.trigger jquery.js:5234
jQuery.extend.ready jquery.js:3427
completed jquery.js:3453

On my JSP there is:

<li class="dropdown" style="clear: both; float: left; width: 106px; margin: 0 8px 35px 0; text-align: center;">
 <a id="drop1" href="" tabindex="100" role="button" class="dropdown-toggle" data-toggle="dropdown">
       <img src="img/100x100.gif">
       <b class="main-font"> Test </b>
       <b class="caret"></b>
 </a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
    <li role="presentation"><a role="menuitem" tabindex="-1" href="">XXX</a></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="">YYY</a></li>
   <li role="presentation"><a role="menuitem" tabindex="-1" href="">ZZZ</a></li>
 </ul>

The problem here is that no matter what I do, it always appears:

Object [object Object] has no method 'dropdown'

Code to load the stuff:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <!-- CSS -->
    <link href="css/bootstrap.css" rel="stylesheet" media="screen">

    <!-- JS & JQuery --->
    <script src="js/bootstrap.js"></script>
    <script src="http://code.jquery.com/jquery.js"></script>

    <title>Test </title>
</head>

and:

<body>

<script type="text/javascript">
    $(function(){
        $('#drop1').dropdown();
    });
</script>
...

Yes, post the code. Also begs the question: why aren't you using Bootstrap 3? — timgavin
– timgavin, Commented Feb 20, 2014 at 3:47
You should only have bootstrap-2.3.2.js or bootstrap.min-2.3.2.js. The latter is a minified version of the former, so they will conflict. The same goes for the .css and .min.css files. — Olly Hodgson
– Olly Hodgson, Commented Feb 20, 2014 at 9:53

zessx · Accepted Answer · 2014-02-20 22:52:48Z

1

It's not a Bootstrap issue, but a jQuery one.

You can't use jQuery directly in HTML attributes, it needs to wait the document (and jQuery itself) to be loaded.

Instead, use this HTML :

<!-- removed onfocus -->
<a id="drop1" href="" tabindex="100" role="button" class="dropdown-toggle" data-toggle="dropdown">
    <img src="img/100x100.gif">
    <b class="main-font"> Test </b>
    <b class="caret"></b>
</a>

And this JS :

$(document).on('ready', function(event) {
    $('#drop1').dropdown();
});

As side notes :

don't include both bootstrap.css and bootstrap.min.css (only the minified version)
don't include both bootstrap.js and bootstrap.min.js (only the minified version)
use the latest version of Bootstrap if possible
include jQuery before Bootstrap (finally...)

edited Feb 20, 2014 at 22:52

answered Feb 20, 2014 at 9:55

zessx

68.9k29 gold badges139 silver badges166 bronze badges

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

7 Comments

Dark Defender Over a year ago

Hi, I removed bootstrap.min.css and bootstrap.min.js. I updated my question, please take a look.

Dark Defender Over a year ago

My code to load the stuff is inside the <head> tag. I have updated my question, please take a look.

Dark Defender Over a year ago

bootstrap.js at line 29: $(function () { and at line 60: }(window.jQuery); . One interesting thing I've noticed is that there are several warnings (6 warnings indeed) between lines 29-60: "; expected" . Quite strange.

zessx Over a year ago

Ok, try a simple trick : inverse your 2 <script> lines in your head (jquery first).

Dark Defender Over a year ago

Haha it worked! Now it's working fine! This is insane. Is there a reasonable explanation for that?

|

user3156971 · Accepted Answer · 2014-02-20 09:55:11Z

0

I didn't use it rarely, but as far as I know you need to follow instructions, in the docks it says:

Wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then add the menu's HTML.

So I think you must put it in <div class="dropdown"> and then it will work

answered Feb 20, 2014 at 9:55

user3156971

1,1352 gold badges15 silver badges17 bronze badges

Collectives™ on Stack Overflow

Problems setting up Bootstrap framework

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related