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>
...
2 answers
solution1
1 ACCPTED 2014-02-20 09:55:11
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.cssandbootstrap.min.css(only the minified version) - don't include both
bootstrap.jsandbootstrap.min.js(only the minified version) - use the latest version of Bootstrap if possible
- include jQuery before Bootstrap (finally...)
solution2
0 2014-02-20 09:55:11
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.