Difference between revisions of "Emergent Web Technologies Spring 2009 Class 9"

Revision as of 21:25, 1 April 2009

Introduction

We already talked about getting remote data with JavaScript using JSONp and jQuery, but, until now, we haven't been able to use Ajax. Now that we can create simple sites with Ruby on Rails I'll cover how to write some simple Ajax code to make your pages more dynamic.

Activity 1

With this activity we'll take a regular scaffolded Rails site and add a little bit of Ajax. The idea is that the site is designed to work without Ajax, but if the user has JavaScript enabled, we can make it a little bit more dynamic.

1. Open Instant Rails and the Ruby console window

2. Generate a new Rails site

 rails ajax

3. Navigate to the new rails site and create the scaffold for a simple locations database

 cd ajax

 ruby script/generate scaffold Location name:string address:string city:string state:string zip:string

rake db:migrate

4. Make sure that your site works by starting the server

ruby script/server

And then open the link to your site http://localhost:3000/locations

5. Create a new location using your site and then go back to the site index. \

Notice that you can click around on the urls to view the location, edit it and delete it. We can use Ajax to enhance the site so that you won't need to reload the page every time you want to move around the site.

Note: this is meant to demonstrate Ajax more than it is to demonstrate good user interface design. In real life, some of the Ajax used here might not be the best way of designing things.

6. The first thing we can do is modify the page so that we don't need to reload to view a location. We can just view it on the same page as the locations index.

Open up the location index view at

 /app/views/locations/index.html.erb

7. Add a new div to the bottom of the page where we can show the preview content

 <div id="preview-div">
 </div>

And modify the show link to add a new class that will we target with JavaScript

 <%= link_to 'Show', location, :class => 'show-link' %>

8. We're going to be using jQuery for Ajax calls, so you'll need to download it here

I usually modify the name of the file so it's just called jquery.js. You can modify the file name if you want.

9. Once you have the file downloaded you'll need to put it in the following directory

 /public/javascripts

The public folder is where files that aren't part of your Rails application be created and accessed.

10. Go back to your view page and add the following line to the top of the page

 <%= javascript_include_tag "jquery" %>

The javascript_include_tag helper function will automatically include the jquery.js file from the javascripts folder (convention over configuration).

Reload your page and look at the source to make sure that your JavaScript is being included.

11. Now we can finally create the JavaScript to add some Ajax to our page. Create a new file for the JavaScript at

 /public/javascripts/show.js

And add the following code to it

var Show =
{
   init: function()
   {
       jQuery('.show-link').click(function(event)
       {
           event.preventDefault();
           Show.load(this.href);
       });
   },
   
   load: function(url)
   {
       jQuery.ajax(
       {
           url: url,
           success: function(html)
           {
               jQuery('#preview-div').html(html);
           }
       });
   }
};

jQuery(Show.init);

The Show object contains a couple utility functions for adding Ajax to our page.

The init function finds any links that have have a class name "show-link" and adds a click handler to them. The click handler prevents the link from being followed and instead calls the Show.load function and passes the url of the link to it.

The load uses jQuery's ajax function to make an Ajax call to the link's url. If the call succeeds, an anonymous function is called that fills the preview div with the content that came back from the Ajax call.

12. To get this script to load on your index page, you'll need to include it. So modify the javascript_include_tag call so it's loading jQuery and the show library

 <%= javascript_include_tag "jquery", "show" %>

13. Reload your index page in the browser and click on the show link. Instead of taking you to another page, the show link should load in the content for the location in the preview div.

If you open up the Firebug console you should be able to see the Ajax calls as they go by.