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:

enter image description here

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:

enter image description here

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.

enter image description here

Still doesn't work

Checking the network console (as requested by the user), I got this:

enter image description here

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

enter image description here

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

+3


source to share


1 answer


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>
      

Run codeHide result


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>
      

Run codeHide result


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.

+1


source







All Articles