CODEWITHSUNDEEP
jqueryruby-on-railsruby-on-rails-3
Ryan Arneson
Ryan Arneson

Reputation: 1323

Why is jQuery not loading in my Rails 3.2.3 app?

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.

Upvotes: 11

Views: 12390

Answers (3)

Lavixu
Lavixu

Reputation: 1398

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.

Upvotes: 0

Hartwig
Hartwig

Reputation: 1373

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.

Upvotes: 4

Ryan Arneson
Ryan Arneson

Reputation: 1323

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 .

Upvotes: 11

Related Questions