Menu
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?
909
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 -->
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"
]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
