I am trying to use Bootstrap to make an interface for a program. I added jQuery 1.11.0 to the <head> tag and thought that was that, but when I launch the web page in a browser jQuery reports an error:
Uncaught Error: Bootstrap's JavaScript requires jQuery
I have tried using jQuery 1.9.0, I have tried with copies hosted on several CDNs, but I can't get it work. Can anybody point out what I'm doing wrong?
Try this
Change the order of files it should be like below..
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
If you're in a Browser-Only environment, use SridharR's solution.
If you're in a Node/CommonJS + Browser environment (e.g. electron, node-webkit, etc..); the reason for this error is that jQuery's export logic first checks for module, not window:
if (typeof module === "object" && typeof module.exports === "object") {
// CommonJS/Node
} else {
// window
}
Note that it exports itself via module.exports in this case; so jQuery and $ are not assigned to window.
So to resolve this, instead of <script src="path/to/jquery.js"></script>;
Simply assign it yourself by a require statement:
<script>
window.jQuery = window.$ = require('jquery');
</script>
NOTE: If your electron app does not need nodeIntegration, set it to false so you won't need this workaround.
you should load jquery first because bootstrap use jquery features. like this:
<!doctype html>
<html>
<head>
<link type="text/css" rel="stylesheet" src="css/animate.css">
<link type="text/css" rel="stylesheet" src="css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" src="css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/custom.css">
<!-- Shuffle your scripts HERE -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/wow.min.js"></script>
<!-- End -->
<title>pyMeLy Interface</title>
</head>
<body>
<p class="title1"><strong>pyMeLy</strong></p>
<p class="title2"><em> A stylish way to view your media</em></p>
<div style="text-align:center;">
<button type="button" class="btn btn-primary">Movies</button>
<button type="button" class="btn btn-primary btn-lg">Large button</button>
</div>
</body>
</html>
You need to add JQuery before adding bootstrap-
<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
You have provided wrong order for JAVASCRIPT and BOOTSTRAP
by convention bootstrap must follow jquery file definition
<!-- JQuery Core JavaScript -->
<script src="lib/js/jquery.min.js"></script>
<script src="lib/js/jquery-ui.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="lib/js/bootstrap.min.js"></script>
After struggling with this problem I took three steps:
<body></body> tags rather than in the <head></head>.
These worked for me but there may be different behaviors based on the browser you are using.In my case solution is really silly, and strange.
Below code was pre-populated by _Layout.cshtml file. (NOT written by me)
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
But, when I verified in Scripts folder, jquery-1.10.2.min.js was not even available. Hence, replaced code like below where jquery-1.9.1.min.js is an existing file:
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
I'm using NodeJS and got the same error. Like the other answers, the problem was also because JQuery needed to be loaded before Bootstrap; however, because of the NodeJS characteristics, this change had to be aplied in the pipeline.js file.
The change in pipeline.js was like this:
var jsFilesToInject = [
// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/angular.1.3.js',
'js/dependencies/jquery.js',
'js/dependencies/bootstrap.js',
'js/dependencies/**/*.js',
];
I'm also using grunt to help, and it automatically changed the order in the main html page:
<!--SCRIPTS-->
<script src="/js/dependencies/angular.1.3.js"></script>
<script src="/js/dependencies/jquery.js"></script>
<script src="/js/dependencies/bootstrap.js"></script>
<!-- other dependencies -->
<!--SCRIPTS END-->
Hope it helps! You didn't said what your environment was, so I decided to post this answer.
If you are using require.js than need to add
window.$ = window.jQuery = require('jquery') in app.js
OR you can make dependent file load after parent file loaded.. such as below concept
require.config({
baseUrl: "scripts/appScript",
paths: {
'jquery':'jQuery/jquery.min',
'bootstrap':'bootstrap/bootstrap.min'
},
shim
shim: {
'bootstrap':['jquery'],
},
// kick start application
deps: ['app']
});
Above code shown that bootstrap is dependent on Jquery so i have added in shim and make it dependent
If your code looks good, verify that jQuery successfully loaded to your server. In my case, the jQuery files were published to the server by my IDE, but the web server only had a 0 KB file stub. With no content, the server failed to serve the file to the browser.
After re-publishing the file and verifying that the server actually received the whole file, then my web page stopped giving me the error.
You need to add JQuery js before adding bootstrap js file, because BootStrap use jqueries function. So make sure to load first jquery js and then bootstap js file.
<!-- JQuery Core JavaScript -->
<script src="app/js/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="app/js/bootstrap.min.js"></script>
If this occurs IE intranet only, check compatibility settings and uncheck "Display intranet sites in Compatibility mode" .
IE-->settings-->compatibility
I had tried almost all the above methods.
Finally fixed it by including the
script src="{%static 'App/js/jquery.js' %}"
just after loading the staticfiles i.e {% load staticfiles %} in base.html
On official docs: https://electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron
<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>
