rails and bootstrap: Uncaught ReferenceError: jQuery is not defined

Question

I created a simple webapp integrating bootstrap 3 in a rails 3.2.17 application, following this procedure found on stackoverflow, so without using a gem but manually copying the bootstrap files in the relevant app directories.

Even if i have, in my gem file:

gem 'jquery-rails'

i can still see, inspecting my web page with chrome, the error:

Uncaught ReferenceError: jQuery is not defined

My page is a "normal" html page in public directory. Maybe it doesn't "inherit" all the assets stuff? The code is like this:

<!DOCTYPE html>
<html>
<head>
    <title>Bootsrap Test 01</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>

...

I've not yet tried but i guess that javascript based feature won't work.

Kirti Thorat · Accepted Answer · 2014-04-17 13:19:58Z

34

Assuming that after adding gem 'jquery-rails', you have ran bundle install command.

Make sure you have following in app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap.min   // Add it after jquery and jquery_ujs

EDIT

You will need to explicitly include jQuery before including /bootstrap.min.js. For example :

<!DOCTYPE html>
<html>
<head>
    <title>Bootsrap Test 01</title>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/assets/jquery.js" type="text/javascript"></script>
    <script src="/assets/jquery_ujs.js" type="text/javascript"></script>
    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>

edited Apr 17, 2014 at 13:19

answered Apr 8, 2014 at 21:08

Kirti Thorat♦

53.1k9 gold badges105 silver badges108 bronze badges

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

3 Comments

AgostinoX Over a year ago

bundle install gave me (among others) this output: Using jquery-rails (3.1.0). Regarding the other point, in my app/assets/javascripts/application.js there are two entries //= require jquery //= require jquery_ujs. The problem is that i think that they don't affect a "custom" page that I create in public folder. Wait. this needed to be said. I update the question.

AgostinoX Over a year ago

Ok, it worked exactly as you said. 1) please consider that i updated the href and src to start with a / because otherwise it works just inside the root folder. So if you want, you can make the same update in your answer. 2) maybe it is worth to mention that jquery and jquery_ujs have to come before bootstrap. Newbies remark.

Kirti Thorat Over a year ago

@AgostinoX Added it to the answer. :)

Sergiy Seletskyy · Accepted Answer · 2014-11-08 20:01:45Z

16

Even if you have set jquery correctly you can still see that issue when you inline javascript code is evoked before jQuery is initialized.

You can wrap your javascript code in

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work with $
});

Or refactor your code to not use inline javascript :)

answered Nov 8, 2014 at 20:01

Sergiy Seletskyy

17.3k7 gold badges73 silver badges81 bronze badges

Comments

mpalencia · Accepted Answer · 2017-03-08 04:51:52Z

12

on 'application.js' of rails 5.0.1 the default is

//= require bootstrap
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .

change it to

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
//= require bootstrap

*load first jquery before bootstrap

answered Mar 8, 2017 at 4:51

mpalencia

6,0875 gold badges49 silver badges62 bronze badges

2 Comments

GOXR3PLUS Over a year ago

This is the answer , perfect !

Marcus Over a year ago

Had a similar problem, and the solution was change the ordering as well :+1:

Conor · Accepted Answer · 2016-07-11 23:27:16Z

1

Another place to check is the <head> of the application.html.erb file.

Be sure that you're loading in jQuery before the Bootstrap javascript.

answered Jul 11, 2016 at 23:27

Conor

3,6392 gold badges24 silver badges38 bronze badges

1 Comment

Burak Kaymakci Over a year ago

How do you correctly load it though? I am about to go crazy. Aren't we supposed to use <% javascript_include_tag %> or something? I would really appreciate your answer. I've been trying this for hours...

kai_onthereal · Accepted Answer · 2017-12-31 20:02:53Z

0

I came across the same error message in the console.

Just make sure jQuery is above Bootstrap in your 'assets/javascripts/application.js' file

Solution:

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require bootstrap

answered Dec 31, 2017 at 20:02

kai_onthereal

5163 silver badges10 bronze badges

Collectives™ on Stack Overflow

rails and bootstrap: Uncaught ReferenceError: jQuery is not defined

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related