Session 8 Using AJAX and RJS

0. Setup

First, check out the application from github by running the following commands:

$ git clone git://github.com/urug/media_lender.git

Once it’s done, checkout tag 4.1 by running:

$ cd media_lender
$ git checkout 4.1

Be sure to run your migrations and the populate tasks.

$ rake db:migrate
$ rake db:populate:three
$ rake db:populate:four

1. Adding the javascript to the layout.

Rails offers a helper to include all the JavaScript files needed for this.

Add the following to your layout:

# views/layouts/application.html.erb

<%= javascript_include_tag :defaults %>

Now when you reload the site and view your source code, you should see the following:

<script src="/javascripts/prototype.js?1248813322" type="text/javascript"></script>
<script src="/javascripts/effects.js?1248813322" type="text/javascript"></script>
<script src="/javascripts/dragdrop.js?1248813322" type="text/javascript"></script>
<script src="/javascripts/controls.js?1248813322" type="text/javascript"></script>
<script src="/javascripts/application.js?1248813322" type="text/javascript"></script>

2. Use the Prototype Helpers

There are some really cool JavaScript helpers that can be used in Rails. One of which that we will use is link_to_remote.

link_to_remote automatically generates a link that uses AJAX to perform a request and can populate a div with the results if specified.

Let’s add a link to our movies form.

# views/movies/_form.html.erb

<%= link_to_remote "Import from IMDB", 
            :url => { :action => "pull_from_imdb" }, 
            :with => "Form.serialize('new_movie')" %>

This will submit a request to the action ‘pull_from_imdb’ when clicked.

3. Import movie data using our IMDB class

If you look in the lib folder, you will see the file IMDB.rb. This is a class written by Stephen Becker IV that uses Hpricot to parse source code from http://www.imdb.com.

Let’s make it work. Add the following method to movies_controller.rb:

# movies_controller.rb

def pull_from_imdb
  title = params[:movie][:title]
  @imdb_movie = IMDB.new(title)
  puts "TITLE: #{@imdb_movie.title}"
  puts "RATING: #{@imdb_movie.certification["\nUSA"]}"
  puts "GENRE: #{@imdb_movie.genre.first}"
  puts "SYNOPSIS: #{@imdb_movie.plot}"
end

Now that we have this, let’s give it a test. Go to add a new movie and fill in a movie title. For example, “Raiders of the Lost Ark”. Click ‘Import from IMDB’. Your console should have the following:

Completed in 35ms (View: 21, DB: 0) | 200 OK [http://localhost/movies/new]
TITLE: Raiders of the Lost Ark
RATING: R
GENRE: Action
SYNOPSIS: Archeologist and adventurer Indiana Jones is hired by the US government to find the Ark of the Covenant before the Nazis.

4. Create dynamic JavaScript using RJS

Now that we know we are getting the correct data, add a new file in the views/movies folder called pull_from_imdb.rjs. This is different that what we’ve seen before. This is a ruby file that renders javascript.

# views/movies/pull_from_imdb.rjs

page << "$('movie_title').setValue('#{@imdb_movie.title}')"
page << "$('movie_rating').setValue('#{@imdb_movie.certification["\nUSA"]}')"
page << "$('movie_genre').setValue('#{@imdb_movie.genre.first}')"
page << "$('movie_synopsis').setValue('#{@imdb_movie.plot}')"

Now give it another shot. You should see the data now pre-populate when the link is clicked.

5. Just a bit more for fun…

Let’s add one more thing to the rjs file:

# views/movies/pull_from_imdb.rjs

page.visual_effect :highlight, 'new_movie', :duration => 3