CODEWITHSUNDEEP
jquerytwitter-bootstraphead
Marius
Marius

Reputation: 1281

The jQuery library is not found in Bootstrap

In section head of my site I have this resouces:

CODE HTML:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>

The problem is that I get this error:

Uncaught Error: Bootstrap's JavaScript requires jQuery

What does this error and how can I solve it? It is wrong order they are posted resources?

Can you please tell me how to fix this error?

Thanks in advance!

Upvotes: 3

Views: 2559

Answers (2)

Manwal
Manwal

Reputation: 23816

In official documentation http://getbootstrap.com/customize/#plugins

jQuery required All plugins require the latest version of jQuery to be included.

Add this tag(jquery script) above bootstrap:

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

Add this here:

<!-- Jquery library -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>

Upvotes: 0

Sk93
Sk93

Reputation: 3718

It's because you are trying to use (as in, you're referencing the script file) Bootstrap before you reference jQuery.

jQuery is a prerequisite of Bootstrap, and must be referenced first, as mentioned on the Bootstrap site here: Bootstrap - Getting Started

jQuery required

Please note that all JavaScript plugins require jQuery to be included, as shown in the starter template. Consult our bower.json to see which versions of jQuery are supported.

Whilst you do include a reference to jQuery in your markup, it's important to note the order in which references appear.
When your page is run, the JavaScript engine will start at the top of this list, then work down it one by one, running the code inside them in that order.
As you have BootStrap higher up in the list than jQuery, when the JavaScript engine gets to it and tries to run it, it doesn't know what jQuery is yet, and so will fail because the Bootstrap code tries to use bits of jQuery within it.
However, if jQuery was parsed first by the JavaScript engine, it would already know what it was by the time it got to the BootStrap code, and all would be well!

So, to clarify, this line:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

Needs to appear before this line:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

in your markup.

Like this:

<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<!-- Include jQuery before any scripts that depend upon it -->
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://dinbror.dk/bpopup/assets/jquery.bpopup-0.11.0.min.js"></script>
<!-- Include Bootstrap after it's dependency (jQuery) -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">

<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/0.2.1/jquery.velocity.min.js"></script>

Upvotes: 3

Related Questions