Why is jQuery not loading in my Rails 3.2.3 app?

11
votes

Up until yesterday jQuery was loading just fine in my Rails app. I was playing around with getting the debugger/ruby-debug gem installed. As you are probably aware there are issues with the debugger gem in Rails 3 and I was unsuccessful in getting the dependancies installe so I removed the gems from my Gemfile. Since then when loading my site jQuery is not loading. These are the messages I see in console:

assets/jquery_ujs.js?body=1:377Uncaught ReferenceError: jQuery is not defined
bootstrap-transition.js:24Uncaught TypeError: undefined is not a function
bootstrap.js:3Uncaught ReferenceError: jQuery is not defined
welcome:210Uncaught ReferenceError: $ is not defined

And here is my application.js file:

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

If I load jQuery explicitly in layouts/application.html.erb, like so, it works:

<%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" %>
<%= javascript_include_tag "application" %>

Any thoughts on what I can do to resolve this and get jQuery loading again? Looking in .rvm/gems/ruby-1.9.3-p125/gems/jquery-rails-2.0.2/vendor/assets/javascripts I can see jquery.js and jquery.min.js are still there.

3
jqueryruby-on-railsruby-on-rails-3
Do you still have the gem 'jquery-rails' line in your gemfile? – Dylan Markow
Sure do. Even did a gem install 'jquery-rails' successfully. – Ryan Arneson
Did you try putting the jquery libs in app/assets/javascripts folder? – uday
No. I never had to before. jQuery is included with a new Rails app as far as I know. Anyway, that's essentially what I'm doing in my snippet above, but I'm using a CDN instead of a local lib. Obviously for production I would have used a local lib as well for fall back, but this was just a test. – Ryan Arneson
You must be having some sort of conflict with your JS files. Try reordering your tree and see if that makes a difference. – Deej

3 Answers

11
votes

Thanks @Djj. Re-ordering my application.js tree seems to have resolved the issue. Here is my revised tree:

//= require jquery_ujs
//= require jquery
//= require twitter/bootstrap
//= require jquery.placeholder
//= require_tree .
4
votes

In my case the problem was due to asynchronously loading the javascript file.

<%= javascript_include_tag "application", :async => true %>

Switching back to 

<%= javascript_include_tag "application" %>

solved the issue.

0
votes

After a long time spent , this solved my problem with the error.

Make sure that Jquery is loaded only once.

Include gem 'jquery-rails' in Gemfile and do $ bundle install

Make sure to include these in app/assets/javascripts/application.js file.

//= require jquery
//= require jquery_ujs

The syntax when wrong like // require jquery leads to not loading jquery.

If everything is included right, the page source of your html file must show all the source files included.

For me, I had a problem because I was explicitly loading the jquery plugin sources from google in application.html.erb under app/views/layouts apart from requiring it in application.js file under app/assets/javascript. This caused jquery to be defined again and few errors like placeholder() not defined, oApi not defined for null would pop up.