Home ›

At the Forge - RJS Templates

Issue 158

From Issue #158
June 2007

Jun 01, 2007  By Reuven M. Lerner
 in
The power of Ajax to fetch and run JavaScript generated by your server-side language.

Listing 2. index.rhtml (Ajax Version)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title id="title">Sample HTML page</title>
        <%= javascript_include_tag 'prototype' %>
    </head>

    <body>
        <h1 id="headline">Headline</h1>

        <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>
    </body>
</html>

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.

  • The contents of the form with the ID fakeForm are submitted.

  • The value returned from the Ajax invocation is used to update the contents of the HTML element with the ID headline.

All that's left for us to examine is our controller, shown in Listing 3. The controller doesn't necessarily know that it is being invoked by a background Ajax process or that its contents will be used to update the headline element. Rather, it simply is invoked like any method, turning the words into Pig Latin. The translated sentence is returned to the user's browser as a plain-text file.

Listing 3. showme_controller.rb


class ShowmeController < ApplicationController

  def piglatin_sentence
    # Get the headline
    sentence = params[:future_headline]
    words = sentence.split

    sentence = ""

    # Go through each word, applying the secret 
    # Pig Latin algorithm
    words.each do |word|
      if word =~ /^[aeiou]/i
        word << "way"
      else
        first_letter = word.slice(0,1)
        rest = word.slice(1..-1)

        word = "#{rest}#{first_letter}ay"
      end

      sentence << word
      sentence << " "
    end

    render :text => sentence
  end

end
Returning JavaScript

Now, the real magic begins. As we just saw, our controller (piglatin_sentence) returns a plain-text document to its caller. Of course, we're free to return data in whatever format we please. One possible format might be XML. Indeed, the term Ajax is supposed to stand for Asynchronous JavaScript and XML, so it should come as no surprise that XML is a common format for return values. Another format that is growing in popularity is JSON (JavaScript Object Notation), a textual version of JavaScript objects that makes it fast and easy to exchange data.

But, in the world of Ruby on Rails, there is another type of data that the controller might return to the user's browser, namely JavaScript. This might not sound all that clever, but consider what Prototype does with it. If a controller is invoked with link_to_remote or submit_to_remote, and if the HTTP response has a content-type of xml+javascript, the JavaScript is evaluated.

This could potentially save time—instead of returning the text that should be used for the headline and then using JavaScript to insert it. (True, we were able to say this tersely by using an :update parameter to the call to submit_to_remote. But the code still exists.) Rather, we simply could return JavaScript code that uses the DOM to modify the document. This would simplify our code quite a bit.

Listing 4. index.rhtml (Updated for JavaScript in the HTTP Response)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title id="title">Sample HTML page</title>
        <%= javascript_include_tag 'prototype' %>
    </head>

    <body>
        <form id="fakeForm">
            <h1 id="headline">Headline</h1>
        <p><input type="text" name="future_headline" /></p>
        </form>

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

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

listing2 index.rhtml

nnoel's picture
Submitted by nnoel on Fri, 05/11/2007 - 06:58.

I think you have to send the correct form id in the submit_to_remote
:submit => "theForm" in place of :submit => "fakeForm"

(or changing the form id to fakeForm)

Webcast
More Resources
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers

Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.

Learn More

Sponsored by AMD

White Paper
More Resources
Red Hat White Paper: Using an Open Source Framework to Catch the Bad Guy

Built-in forensics, incident response, and security with Red Hat Enterprise Linux 6

Every security policy provides guidance and requirements for ensuring adequate protection of information and data, as well as high-level technical and administrative security requirements for a system in a given environment. Traditionally, providing security for a system focuses on the confidentiality of the information on it. However, protecting the data integrity and system and data availability is just as important. For example, when processing United States intelligence information, there are three attributes that require protection: confidentiality, integrity, and availability.

Learn more about catching the bad guy in this free white paper.

Learn More

Sponsored by DLT Solutions