CODEWITHSUNDEEP
javascriptcsstwitter-bootstrap
Dark Defender
Dark Defender

Reputation: 273

Problems setting up Bootstrap framework

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

Upvotes: 0

Views: 817

Answers (2)

zessx
zessx

Reputation: 68790

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...)

Upvotes: 1

user3156971
user3156971

Reputation: 1135

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

Upvotes: 0

Related Questions