Uncaught Error: Bootstrap's JavaScript requires jQuery - javascript

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">start</li>
<li role="presentation">over ons</li>
<li role="presentation">diensten</li>
<li role="presentation">winkel</li>
<li role="presentation">contact</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?

As I can see in your code you have added jquery Js after the Bootstrap js. You need to include jquery js before adding bootstrap js. Your problem will fix, because bootstrap requires Jquery file.
<!-- First include jquery js -->
<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>
<!-- Then include bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

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"
]

Related

HTML links to js file but it still won't work

I am trying to use a js file in my html file but got stuck.
The html file links to my js file but the js still wont work.
my code (in the snippet it seems to be working but in my file it wont):
document.body.innerHTML = "<h1>Today's date is </h1>"
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
<title>Reservify</title>
</head>
<body>
</body>
Your javascript is executed before the DOM document is loaded.
Run JavaScript after loading the DOM document.
Like this:
window.addEventListener('DOMContentLoaded', function(){
document.body.innerHTML = "<h1>Today's date is </h1>";
});
Or like this:
window.onload = function() {
document.body.innerHTML = "<h1>Today's date is </h1>";
}
Best Practice
The best practice is to implement your scripts at the end of the body tag.
The browser will load the visible page first and it is a better user experience.
Code Example
<head>
<title>Reservify</title>
</head>
<body>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
Also read
Why script tags should be placed at the end of body tag
You have to put the js call on the body, this because the DOM load first this element when is loading the page this make the load of the page faster
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
So you have to put the above line on the end of the body, and your code will be like this:
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, width=device-width">
<!-- jquery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<!-- logo -->
<link href="/static/logo2.ico" rel="icon">
<!-- css file -->
<link href="/static/styles.css" rel="stylesheet">
<!-- YOU HAVE TO DELETED THE JS CALLS HERE -->
<title>Reservify</title>
</head>
<body>
<!-- Here is your code -->
<!-- In the end of the body you put your js calls -->
<!-- hammer.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.js"></script>
<!-- touchswipe.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.19/jquery.touchSwipe.min.js"></script>
<!-- js file -->
<script type = "text/javascript" src="../../static/js/reserve.js"></script>
</body>
I hope I've helped you (;

Uncaught ReferenceError: $ is not defined on Electron

I have developed this web-based application on a wamp server and it runs ok, and now I started creating a desktop application using electron from last week and I keep on getting this error. But I can login and it works fine, except for the errors I get. Guys, please help me out on this one, this is my first-week using electron.
Below are all the links and scripts loaded
<!-- Bootstrap 3.3.7 -->
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<!-- Morris chart -->
<link rel="stylesheet" href="bower_components/morris.js/morris.css">
<!-- jvectormap -->
<link rel="stylesheet" href="bower_components/jvectormap/jquery-jvectormap.css">
<!-- Date Picker -->
<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="plugins/iCheck/flat/blue.css">
<!-- bootstrap wysihtml5 - text editor -->
<link rel="stylesheet" href="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">
<script src="bower_components/jquery/dist/jquery.min.js"></script>
For footer
<!-- jQuery 3 -->
<!-- <script src="bower_components/jquery/dist/jquery.min.js"></script> -->
<script>window.$ = window.jQuery = require('./bower_components/jquery/dist/jquery.min.js');</script>
<!-- jQuery UI 1.11.4 -->
<script src="bower_components/jquery-ui/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
$.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.7 -->
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- Morris.js charts -->
<script src="bower_components/raphael/raphael.min.js"></script>
<script src="bower_components/morris.js/morris.min.js"></script>
<!-- Sparkline -->
<!-- Select2 -->
<script src="bower_components/select2/dist/js/select2.full.min.js"></script>
<script src="bower_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
<!-- jvectormap -->
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- jQuery Knob Chart -->
<script src="bower_components/jquery-knob/dist/jquery.knob.min.js"></script>
<!-- daterangepicker -->
<script src="bower_components/moment/min/moment.min.js"></script>
<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>
<!-- datepicker -->
<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<!-- Bootstrap WYSIHTML5 -->
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
<!-- Slimscroll -->
<script src="bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<!-- AdminLTE dashboard demo (This is only for demo purposes) -->
<script src="dist/js/pages/dashboard.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="dist/js/demo.js"></script>
<!-- jQuery 3 -->
<!-- AdminLTE App -->
<!-- FLOT CHARTS -->
<script src="bower_components/Flot/jquery.flot.js"></script>
<!-- FLOT RESIZE PLUGIN - allows the chart to redraw when the window is resized -->
<script src="bower_components/Flot/jquery.flot.resize.js"></script>
<!-- Page script -->
Try including JQuery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

how to solve "style sheet could not be loaded" in Bootstrap

I should at least get grey color navbar but I am getting red sign error in the bottom "Stylesheet could not be loaded". Even trying to remove one css at a time but nothing help.
I am also getting this error in console "ReferenceError: Popper is not defined".
Even I am not getting auto suggest in sublime related to bootstrap classes.
<!DOCTYPE html>
<html>
<head>
<!-- Website Title & Description for Search Engine purposes -->
<title></title>
<meta charset="UTF-8" name="description" content="">
<!-- Mobile viewport optimized -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- Bootstrap CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="includes/css/bootstrap-glyphicons.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="includes/css/styles.css" rel="stylesheet">
<!-- Include Modernizr in the head, before any other Javascript -->
<script src="includes/js/modernizr-2.6.2.min.js"></script>
</head>
<body>
<div class="container" id="main">
<div class="navbar navbar-fixed-top">
<div class="container">
<a class="navbar-brand" href="/" src="/images/logo.png" alt="your logo"/>
</div><!-- end container-->
</div><!-- end navbar-->
<div class="carousel slide" id="myCarousel">
</div><!-- end Carousel -->
<div class="row" id="bigCallout">
</div><!-- end bigCallout-->
<div class="row" id="featuresHeading">
</div><!-- end featuresHeading-->
<div class="row" id="features">
</div><!-- end features-->
<div class="row" id="moreInfo">
</div><!-- end moreInfo-->
<div class="row" id="moreCourses">
</div> <!-- end moreCourses -->
</div><!--end container -->
<footer>
</footer>
<!-- All Javascript at the bottom of the page for faster page loading -->
<!-- First try for the online version of jQuery-->
<script src="http://code.jquery.com/jquery.js"></script>
<!-- If no online access, fallback to our hardcoded version of jQuery -->
<script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>
<!-- Bootstrap JS -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Custom JS -->
<script src="includes/js/script.js"></script>
</body>
</html>
From Bootstrap site
Many of our components require the use of JavaScript to function.
Specifically, they require jQuery, Popper.js, and our own JavaScript
plugins. Place the following s near the end of your pages,
right before the closing tag, to enable them. jQuery must come
first, then Popper.js, and then our JavaScript plugins.
<script src="path/jquery"></script>
<script src="path/popper"></script>
<script src="path/bootstrap"></script>
It seems you need to add popper.js in your application.Note the order of files from the above snippet
I had the same problem. I was using Bootstrap 3.3.7 and this message keeps appearing all the time. I solved this by changing from jQuery 3.3.1 (the latest as of now) to jQuery 1.12.4 which is an older version. The message disappears after I made the change. Hope this helps!
Related: twitter bootstrap 3 jquery minimum version
You can try Few things:
First and foremost - try using the CDN for bootstrap.
Try placing href before rel in the link tag.
add media="all"
<link href="css/bootstrap.min.css" rel="stylesheet" media="all">
Get back after the results.

Zurb Foundation 6 - Orbit don't work

I am using the Foundation Sites 6 Framework for one of my sites. I installed it via bower and included the css and js files in my html.
It all works fine but the orbit slider only shows the first two slides and then it stops. I don't get any errors in the console.
Here you can see the website: http://dev.epo-marketing.de/academy-studium-landingpage/
Header:
<!-- styles -->
<!-- build:css _assets/css/styles.min.css -->
<link rel="stylesheet" href="_assets/bower_components/foundation-sites/dist/css/foundation.css">
<link rel="stylesheet" href="_assets/fonts/kit-epo-academy-of-fine-art/css/embedded-woff.css">
<link rel="stylesheet" href="_assets/css/app.css">
<!-- endbuild -->
<!-- /styles -->
Footer:
<!-- scripts -->
<!-- build:js _assets/js/scripts.min.js -->
<script type="text/javascript" src="_assets/bower_components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="_assets/bower_components/what-input/dist/what-input.js"></script>
<script type="text/javascript" src="_assets/bower_components/foundation-sites/dist/js/foundation.js"></script>
<script type="text/javascript" src="_assets/js/app.js"></script>
<!-- endbuild -->
<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap" async defer></script>
<!-- /scripts -->
I solved it by myself. I had to include the motion-ui javascript and css files.

jquery magnificPopup Error

I have found this template and I want to use in my angular 1 application. I have include all directories to my project correctly. When I try to start my application, I have this error:
I have tried this https://stackoverflow.com/questions/24444807/cant-get-magnific-popup-to-work-two-javascript-errors but it did not work.
Can you please help to to solve this issue ?
Update
This is my headers:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>test</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900&subset=latin,greek,greek-ext,vietnamese,cyrillic-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="icon" type="image/png" sizes="16x16" href="assets/img/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/img/favicon-96x96.png">
<script src="//d3js.org/d3.v3.min.js"></script>
..................................
..................................
..................................
..................................
..................................
..................................
..................................
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
<!-- run `gulp inject` to automatically populate bower styles dependencies -->
<!-- endbower -->
<!-- endbuild -->
<!-- build:css({.tmp/serve,src}) styles/app.css -->
<!-- inject:css -->
<!-- css files will be automatically insert here -->
<!-- endinject -->
<!-- endbuild -->
<!-- here this load js files -->
<script src="../js/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="../js/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="../js/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="../js/jquery.waypoints.min.js"></script>
<!-- Carousel -->
<script src="../js/owl.carousel.min.js"></script>
<!-- countTo -->
<script src="../js/jquery.countTo.js"></script>
<!-- Flexslider -->
<script src="../js/jquery.flexslider-min.js"></script>
<!-- Magnific Popup -->
<script src="../js/jquery.magnific-popup.min.js"></script>
<script src="../js/magnific-popup-options.js"></script>
<!-- Main -->
<script src="../js/main.js"></script>
<!-- build:js(src) scripts/vendor.js -->
<!-- bower:js -->
<!-- run `gulp inject` to automatically populate bower script dependencies -->
<!-- endbower -->
<!-- endbuild -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<!-- build:js({.tmp/serve,.tmp/partials,src}) scripts/app.js -->
<!-- inject:js -->
<!-- js files will be automatically insert here -->
<!-- endinject -->
<!-- inject:partials -->
<!-- angular templates will be automatically converted in js and inserted here -->
<!-- endinject -->
<!-- endbuild -->
when I click on error I get this:

Categories