Create a sample Rails 3 application running with JQuery

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.