Installing jQuery in Rails 3.2.13

Question

I am having trouble getting jQuery to work on Ruby on Rails 3.2.13. I have looked at tutorials, searched youtube, etc. and I still can't get it to work.

More specifically, I am having trouble using jQuery ui. I can't get the accordion widget to work. I can't even get simple jQuery (like displaying a hello alert message) to work on ROR.

Your help is greatly appreciated. Thanks!

Here is my application.html.erb file:

 <!DOCTYPE html>
    <html>
    <head>
      <title>TestProj</title>
      <%= stylesheet_link_tag    "application", :media => "all" %>
      <%= javascript_include_tag "application" %>
      <%= csrf_meta_tags %>
    </head>
    <body>

    <%= yield %>

    </body>
    </html>

Here is my gem file:

source 'https://rubygems.org'

gem 'rails', '3.2.13'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'sqlite3'


# Gems used only for assets and not required
# in production environments by default.
group :assets do
  gem 'sass-rails',   '~> 3.2.3'
  gem 'coffee-rails', '~> 3.2.1'

  # See https://github.com/sstephenson/execjs#readme for more supported runtimes
  # gem 'therubyracer', :platforms => :ruby

  gem 'uglifier', '>= 1.0.3'
end

gem 'jquery-rails'

# To use ActiveModel has_secure_password
# gem 'bcrypt-ruby', '~> 3.0.0'

# To use Jbuilder templates for JSON
# gem 'jbuilder'

# Use unicorn as the app server
# gem 'unicorn'

# Deploy with Capistrano
# gem 'capistrano'

# To use debugger
# gem 'debugger'

Hers is my application.js file:

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .


$(document).ready(function() {
 alert('Thanks for visiting!');
});

The question in this format won't get you anywhere. What have you tried? Can you post some code? What is your current set-up. — Arjan
– Arjan, Commented Jun 27, 2013 at 14:12
I included this: <%= javascript_include_tag 'jquery-1.10.1.js', 'application' %> in my application.html.erb file. Then I wrote simple javascript in my application.js file: $(document).ready(function() { alert( "Thanks for visiting!" ); }); — Michael Smith
– Michael Smith, Commented Jun 27, 2013 at 14:15
Can you post your Gemfile and application.js? I think jquery (jquery-rails gem) automate include with rails 3.2.x. — rails_id
– rails_id, Commented Jun 27, 2013 at 14:17
Edit your question to add your code example and a "real" question. — Mualig
– Mualig, Commented Jun 27, 2013 at 14:27

rails_id · Accepted Answer · 2013-06-27 16:11:28Z

4

Jquery automate in Rails 3.2.13, see on your Gemfile, if you have gem 'jquery-rails' on your Gemfile, you should be using 'application', without 'jquery-1.10.1.js', jquery-rails latest version using jQuery 1.10.1 see here

<%= javascript_include_tag :application %>

This will load the app/assets/javascript/application.js file to load all your other javascript files on app/assets/javascript folder, including jQuery:

//= require jquery
//= require jquery_ujs
//= require_tree .

$(document).ready(function() {
 alert('Thanks for visiting!');
});

If you want use JQuery UI, you could use jquery-ui-rails gem https://github.com/joliss/jquery-ui-rails

In your Gemfile, add:

gem 'jquery-ui-rails'

and run bundle install

read here for usage

edited Jun 27, 2013 at 16:11

answered Jun 27, 2013 at 14:31

rails_id

8,2204 gold badges48 silver badges86 bronze badges

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

8 Comments

Michael Smith Over a year ago

Thank you for your post. I am still getting an error. I created a controller test, I def index inside that controller. Then I made an index.html.erb file with nothing in it. I then tried loading the page and got this error: Uncaught TypeError: Property 'alert' of object [object Object] is not a function application.js:19 (anonymous function) application.js:19 fire jquery-1.9.1.js:1038 self.fireWith jquery-1.9.1.js:1149 jQuery.extend.ready jquery-1.9.1.js:434 completed

rails_id Over a year ago

@MichaelSmith again, can you post application.js ?

Michael Smith Over a year ago

I've also tried adding a copy of: jquery-1.10.1.js into app/assets/javascripts/. This results in the same error. Thanks for the help!

rails_id Over a year ago

You don't copy jquery-1.10.1.js into assets,I have tried alert on my apps, it's work fine, can you see on your console browser.

Michael Smith Over a year ago

Ok, Awesome it works in Safari. However, it bugs out in chrome: Uncaught TypeError: Property 'alert' of object [object Object] is not a function application.js:19 (anonymous function) application.js:19 fire jquery.js:3075 self.fireWith jquery.js:3187 jQuery.extend.ready jquery.js:434 completed jquery.js:105

|

rewritten · Accepted Answer · 2013-06-27 14:27:54Z

2

Check your browser's console for any load error. It seems that you are not deploying the javascript, so it's not loaded.

Either use

 <%= javascript_include_tag "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" %>

or have a copy of the file you are serving in any of

/lib/assets/javascripts
/vendor/assets/javascripts
/app/assets/javascripts

answered Jun 27, 2013 at 14:27

rewritten

16.5k2 gold badges49 silver badges50 bronze badges

Collectives™ on Stack Overflow

Installing jQuery in Rails 3.2.13

2 Answers 2

8 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related