At The Forge

Even better, because we're returning a JavaScript program, rather than the contents of an individual HTML element, we can modify multiple parts of the page and even throw in some Scriptaculous effects for good measure.

function updateHeadline. This function takes the current value of the future-headline text field and changes the headline to reflect its contents.

Using a Remote Call

So far, we haven't done anything special. Now, however, we're going to do something a bit more sophisticated: send the contents of our text field to the server in an Ajax call. The server's response will be our headline, translated into Pig Latin.

Making this change requires doing two things. First, we need to write a method in our application controller that takes the headline, turns it into Pig Latin, and then returns that text. Second, we need to modify our template so that it gets the updated text from the server, rather than from a local JavaScript function.

Our updated template is shown in Listing 2. We have made a number of changes, starting with the fact that our form now has an id attribute associated with it, named theForm. The form contains a single element, a text field whose name is future_headline. Note that we need to use the name attribute instead of the id attribute, so that the form element will be submitted with our Ajax call. Also notice that we have changed the name to a Ruby-friendly future_headline (with an underscore), rather than the CSS-friendly future-headline (with a hyphen).

Listing 2. index.rhtml (Ajax Version)

We also have replaced our button with a call to the submit_to_remote helper:

<p><%= submit_to_remote "submit-button", "Pig Latin it!", :url => { :action => "piglatin_sentence" }, :submit => "fakeForm", :update => "headline" %></p>

The above code does quite a few things:

■ It creates a button, whose DOM ID is submit-button.

■ The button has a label of "Pig Latin it!".

■ When the button is clicked, it uses Ajax to invoke the piglatin_sentence action on the server, within the current controller.

Listing 3. showme_controller.rb class ShowmeController < ApplicationController def piglatin_sentence # Get the headline sentence = params[:future_headline] words = sentence.split

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtmli/DTD/xhtml1-transitional.dtd"> <html>

<title id="title">Sample HTML page</title> <%= javascript_include_tag 'prototype' %> </head>

<hi id="headline">Headline</hi>

# Go through each word, applying the secret

# Pig Latin algorithm words.each do |word|

if word =~ /A[aeiou]/i word << "way" else first_letter = word.slice(0,1) rest = word.slice(1..-1)

form id="theForm">

<p><input type="text" name="future_headline" /></p> </form>

<p><%= submit_to_remote "submit-button", "Pig Latin it!", :url => { :action => "piglatin_sentence" }, :submit => "fakeForm", :update => "headline" %></p>

word = "#{rest}#{first_letter}ay" end sentence << word sentence << " " end render :text => sentence end

Are you shocked by the high cost of iSCSI & Fibre Channel storage?

AoE is your answer!

ATA-over-Ethernet = simple, low cost, expandable storage.

EtherDrive® SR1520 ^fflflff

• RAID enabled 3U appliance with 15 slots for hot swap SATA disks

■ Check out our other Storage Appliances and NAS Gateway

1. Ethernet Storage - without the TCP/IP overhead!

2. Unlimited expandability, at the lowest possi ble price point!!

3. You want more storage...you just buy more disks - it's that simple!!!

Visit us at www.coraid.com

for more information.

Was this article helpful?

0 0

Post a comment