JQuery and Bootstrap: warning in console - resource failure
I updated my jQuery a while ago and since then my project has stopped running Javascript all over.
This is the script on the Index page that I am using to test my JS usage:
@section scripts{
<script src="~/js/jquery-3.2.1.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script>
console.log("hi");
</script>
}
This is the output in the console:
What catches your eye:
Unused error: Bootstrap JavaScript requires jQuery. jQuery must be enabled before JavaScript is loaded.
A detailed description of this warning I see:
if (typeof jQuery === 'undefined') {
throw new Error('Bootstrap\ JavaScript requires jQuery.
jQuery must be included before Bootstrap\ JavaScript.')}
JQuery validation now:
It has a tag that lists its screen (extraΓ±o in Spanish)
UPDATE
I decided to remove jQuery and bootstrap and reinstall them: first jQuery and then Bootstrap.
After that, Bauer looks like this.
Still doesn't work
Checking the network console (as requested by the user), I got this:
There is a bunch of kendo ui not loading
Note. I installed kendo ui the same day because I needed an editable mesh, but since it sucked I made my own and dropped the kendo ui.
UPDATE x2
Note. I am working on ASP.NET core
It seems like the answer might be that jQuery has to load before Bootstrap.
To test this, I go to other files (bower.json, _Layout.cshtml), since I usually don't link to scripts in every file. My project usually has a link in the background that loads these scripts into each view automatically, I suppose.
For example, I never link to the kendo ui in the Index page, but in the console I can see that it is not loading (because it is being removed) but was called.
For this I checked _Layout.cshtml
Here I see my links that work for the whole project I believe and the order seems to be correct.
Hope this helps any answer! Thanks to
source to share
You will find two jsfiddle examples here.
https://jsfiddle.net/r9tnow7L/
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The above script loads bootstrap before jQuery as I specified the order in external resources .
https://jsfiddle.net/r9tnow7L/1/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
In this fiddle jQuery is loaded before bootstrap , check the order in external resources ... p>
Check your browser's network bar. This can help you understand the order of the library file.
source to share