Emergent Web Technologies Spring 2009 Class 9

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>