Hi guys,
Today I’m going to show you how to combine the power of Rails 3 with JQuery.
By default Rails 3 comes with Prototype, but let’s say I don’t know Prototype (I really don’t … a good topic for homework), but I still need to use Javascript in my brand new application and I know JQuery, or may be I need JQuery UI components, for example a DateTime picker, than all I need to do is combine JQuery and Rails 3 right ? Yeah so let’s try it manually.
1. First of al we need to create a brand new Rails 3 app :
$ rails new jquery_demo_app -J
create
create README
create Rakefile
create config.ru
create .gitignore
create Gemfile
create app
create app/controllers/application_controller.rb
create app/helpers/application_helper.rb
create app/mailers
create app/models
create app/views/layouts/application.html.erb
create config
create config/routes.rb
create config/application.rb
create config/environment.rb
create config/environments
create config/environments/development.rb
create config/environments/production.rb
create config/environments/test.rb
create config/initializers
create config/initializers/backtrace_silencers.rb
create config/initializers/inflections.rb
create config/initializers/mime_types.rb
create config/initializers/secret_token.rb
create config/initializers/session_store.rb
create config/locales
create config/locales/en.yml
create config/boot.rb
create config/database.yml
create db
create db/seeds.rb
create doc
create doc/README_FOR_APP
create lib
create lib/tasks
create lib/tasks/.gitkeep
create log
create log/server.log
create log/production.log
create log/development.log
create log/test.log
create public
create public/404.html
create public/422.html
create public/500.html
create public/favicon.ico
create public/index.html
create public/robots.txt
create public/images
create public/images/rails.png
create public/stylesheets
create public/stylesheets/.gitkeep
create public/javascripts
create public/javascripts/.gitkeep
create public/javascripts/application.js
create script
create script/rails
create test
create test/fixtures
create test/functional
create test/integration
create test/performance/browsing_test.rb
create test/test_helper.rb
create test/unit
create tmp
create tmp/sessions
create tmp/sockets
create tmp/cache
create tmp/pids
create vendor/plugins
create vendor/plugins/.gitkeep
That “-J” option tells Rails that we don’t need Javascript stuff generated.
2. Next we need to download the latest Jquery version minified and put it under the public/javascripts folder.
So all we need is to copy and paste the text from http://code.jquery.com/jquery-latest.min.js to jquery.js file.
3. Next we need to copy latest Rails Jquery drivers and put it under public/javascripts too.
So we go to https://github.com/rails/jquery-ujs/blob/master/src/rails.js click on raw link and copy it to rails.js file.
These 2 steps can be done in one shot using curl tool.
$ cd jquery_demo_app/
$ cd public/javascripts/
$ curl http://code.jquery.com/jquery-latest.min.js > jquery.js
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 78601 100 78601 0 0 181k 0 --:--:-- --:--:-- --:--:-- 213k
$ curl https://github.com/rails/jquery-ujs/raw/master/src/rails.js > rails.js
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4150 100 4150 0 0 4429 0 --:--:-- --:--:-- --:--:-- 5313
$ ls
application.js jquery.js rails.js
4. And the last thing is to edit in config/application.rb file these lines
# JavaScript files you want as :defaults (application.js is always included).
config.action_view.javascript_expansions[:defaults] = %w()
We need to include jquery.js and rails.js into defaults. And optionally you could specify CDN network but this isn’t always required.
config.action_view.javascript_expansions[:defaults] = %w(jquery rails)
config.action_view.javascript_expansions[:cdn] = %w(https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js rails)
As you can see there are a lot of steps which should be repeated for each application where we want to use JQuery.
Fortunately enough we have another solution.
Gem “jquery-rails”
There is a gem created https://github.com/indirect/jquery-rails which will help us to avoid repeating these steps over and over again.
Let’s experiment with another new application.
Add jquery-rails into our Gemfile.
And run bundle install command. And you could also commit it to a git repo, so if something goes wrong you could revert to initial version.
$ rails new another_jquery_app
# In Gemfile add this line
gem 'jquery-rails'
$ bundle install
Fetching source index for http://rubygems.org/
.
.
.
Using jquery-rails (0.2.6)
.
.
.
Your bundle is complete! Use `bundle show [gemname]` to see where a bundled gem is installed.
$ git init
$ git add .
$ git commit -am "Initial commit"
Now let’s install jquery
$ rails generate jquery:install
remove public/javascripts/controls.js
remove public/javascripts/dragdrop.js
remove public/javascripts/effects.js
remove public/javascripts/prototype.js
fetching jQuery (1.4.4)
create public/javascripts/jquery.js
create public/javascripts/jquery.min.js
fetching jQuery UJS adapter (github HEAD)
c:/Ruby192/lib/ruby/1.9.1/net/http.rb:677:in `connect': SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate
ed (OpenSSL::SSL::SSLError)
from c:/Ruby192/lib/ruby/1.9.1/net/http.rb:677:in `connect'
from c:/Ruby192/lib/ruby/1.9.1/net/http.rb:637:in `do_start'
from c:/Ruby192/lib/ruby/1.9.1/net/http.rb:626:in `start'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:306:in `open_http'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:769:in `buffer_open'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:203:in `block in open_loop'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:201:in `catch'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:201:in `open_loop'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:146:in `open_uri'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:671:in `open'
from c:/Ruby192/lib/ruby/1.9.1/open-uri.rb:33:in `open'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/actions/file_manipulation.rb:77:in `get'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/jquery-rails-0.2.6/lib/generators/jquery/install/install_generator.rb:34:in `download_ujs
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/task.rb:22:in `run'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:118:in `invoke_task'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `block in invoke_all'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `each'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `map'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/invocation.rb:124:in `invoke_all'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/group.rb:226:in `dispatch'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/thor-0.14.6/lib/thor/base.rb:389:in `start'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/railties-3.0.3/lib/rails/generators.rb:163:in `invoke'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/railties-3.0.3/lib/rails/commands/generate.rb:10:in `<top (required)>'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/activesupport-3.0.3/lib/active_support/dependencies.rb:239:in `require'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/activesupport-3.0.3/lib/active_support/dependencies.rb:239:in `block in require'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/activesupport-3.0.3/lib/active_support/dependencies.rb:225:in `block in load_dependency'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/activesupport-3.0.3/lib/active_support/dependencies.rb:596:in `new_constants_in'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/activesupport-3.0.3/lib/active_support/dependencies.rb:225:in `load_dependency'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/activesupport-3.0.3/lib/active_support/dependencies.rb:239:in `require'
from c:/Ruby192/lib/ruby/gems/1.9.1/gems/railties-3.0.3/lib/rails/commands.rb:17:in `<top (required)>'
from script/rails:6:in `require'
from script/rails:6:in `<main>'
Because I use Windows I got this “certificate verify failed (OpenSSL::SSL::SSLError)”. If you don’t have this error skipped to I made a little research and found out that I need to point Rails to a certificate to use when dealing with HTTPS. To see more about this issue follow this link: jQuery, GitHub, SSL. Thanks to 19th comment author. He indicated a solution.
So all we need to do is copy file from https://github.com/Shopify/active_merchant/blob/master/lib/certs/cacert.pem somewhere locally and than indicate this URI in C:\Ruby\Ruby192\lib\ruby\1.9.1\open_uri.rb around line 289
http.use_ssl = true
http.verify_mode = options[:ssl_verify_mode] || OpenSSL::SSL::VERIFY_PEER
http.ca_file = 'C:\Ruby\certs\cacert.pem' # you should indicate where you’ve set your file locally
store = OpenSSL::X509::Store.new
Now let’s try again. Before we try again we’ll need to checkout the version before error occurred.
$ git checkout -f
$ rails generate jquery:install
remove public/javascripts/controls.js
remove public/javascripts/dragdrop.js
remove public/javascripts/effects.js
remove public/javascripts/prototype.js
fetching jQuery (1.4.4)
identical public/javascripts/jquery.js
identical public/javascripts/jquery.min.js
fetching jQuery UJS adapter (github HEAD)
conflict public/javascripts/rails.js
Overwrite d:/rails_tutorial_projects/another_jquery_app/public/javascripts/rails
.js? (enter "h" for help) [Ynaqdh] Y
force public/javascripts/rails.js
Now your application is using JQuery instead of Prototype and all we needed to do is use this little useful gem and I encourage you to use it also.
By the way if you need JQuery ui installed just use
$ rails generate jquery:install --ui
So that is how you can use Rails 3 with JQuery instead of Prototype. Take care.
Posts
