jQuery and Bootstrap: Warning on console - Failed resource

Question

Some time ago I updated my jQuery and since then my project has stopped executing Javascript all over.

This is the script in the Index page I use to test the use of JS:

@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 result in the console:

What catches my eye is:

Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

Going in detail on that alert I see:

if (typeof jQuery === 'undefined') {
  throw new Error('Bootstrap\'s JavaScript requires jQuery. 
jQuery must be included before Bootstrap\'s JavaScript.')}

Checking jQuery now:

It has a tag saying its extrange (extraño in spanish)

UPDATE

I decided to uninstall jQuery and bootstrap and reinstall them: First jQuery and then Bootstrap.

After that, Bower looks like this.

Still not working tho

Checking the Network console (as required by user) I got this:

There is a bunch of kendo ui not loading

Note: I installed kendo ui back in the day because I needed a editable grid, but since it sucked, I made my own and discarded kendo ui.

UPDATE x2

Note: I'm working on ASP.NET Core

It seems that the answer might be that jQuery must load before Bootstrap.

To check this I'm going thru diferent files (bower.json, _Layout.cshtml) since I don't usually reference the scripts in each file. My project usually has a reference in the background that load these scripts into each view automaticaly I believe.

For example, I never reference the kendo ui on the Index page, but in the Console I see that it is failing to load (because it is uninstalled) but is been called.

For this I checked the _Layout.cshtml

Here I can see my references that work for the whole project I believe and it seems the order is correct.

Hope this help to any reply! Thanks

Can you check the browser network panel, whether jQuery (jquery-3.2.1.min.js) is loading or not??? I guess jQuery library file is not loading to the browser. — Shiladitya
– Shiladitya, Commented Aug 3, 2017 at 3:24
@Shiladitya updated! thanks for your reply! Looks like it is being loaded, although the console still shows the message "Uncaught Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript." and all the kendo messages — Luis Alberto Delgado de la Flo
– Luis Alberto Delgado de la Flo, Commented Aug 3, 2017 at 3:52
In your situation, jQuery is loading but after bootstrap.js, thats why you are getting an error. One more thing, why two versions of jQuery you are loading one is jquery.js another is jquery-3.2.1-min.js ???? — Shiladitya
– Shiladitya, Commented Aug 3, 2017 at 4:11
I'm loading two jquerys because I was including the jquery-3.2.1-min.js in the src of the console.log message I included to test my JS, but I deleted that already. It was not on purpose, it was just for a test. Could you please tell me how to make the jQuery load before bootstrap? — Luis Alberto Delgado de la Flo
– Luis Alberto Delgado de la Flo, Commented Aug 3, 2017 at 4:24

Shiladitya · Accepted Answer · 2017-08-03 04:37:02Z

2

Here you go with two jsfiddle example.

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>

In the above fiddle, bootstrap is loading before jQuery as I specified an order in the 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 loading before bootstrap, check the ordering in external resources.

Please check the browser network panel. This might help you to understand the order of the library file.

answered Aug 3, 2017 at 4:37

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Luis Alberto Delgado de la Flo Over a year ago

I'm tempted to edit the bower.json file. In this file, on the dependencies and resolutions sections, bootstrap appears first. I understand your answer but I'm not sure in which part should I edit the application in order to alter the execution. bower.json would be correct?

Luis Alberto Delgado de la Flo Over a year ago

Not necessarily. Most of the time I don't tag my scripts on the views/html but my JS was still working on all the project. As a proof of that, I added a src of jquery-3.2.1-min.js to my view and you saw that jquery was duplicated, although I only added one, another was is running in the background for all the project I believe

Luis Alberto Delgado de la Flo Over a year ago

I added an update on the question. I'm working on asp.net core and we have a file: _layout.cshtml that contains the references to the scripts used in the project. Sorry for no adding this info before

Collectives™ on Stack Overflow

jQuery and Bootstrap: Warning on console - Failed resource

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related