Monday, January 10, 2011

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.

Application before adding jquery

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.

JQuery UJS driver

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”

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.

1 comment:

  1. Brand new to rails, trying to get a simple JQuery application up and running on my Windows 7 box and BAM, I hit the JQuery / SSL problem which leaves me with my rails.js file still full of prototype.js functions.

    Thanks for your post, not only instructive on getting up and running with JQuery on rails, but also for reposting the solution for the cert. problem. You may not have found it, but if you hadn't picked it out of the comments, polished it up and put it on display, neither would I have found it !

    Karma++

    ReplyDelete