Ruby on Rails is a powerful web application framework that provides numerous tools for creating web applications fast! It is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern. Rails also provides Ajax support in the view layer, a request and response controller, and a domain model wrapping the database. Ajax is a creative technique used to make web sites more interactive and responsive to user input. RJS templates are an exciting and powerful new type of template added to Rails 1.1. This article will introduce RJS templates and show how they allow you to easily add Ajax functionality to your web application.
Ajax
Ajax is an acronym for "Asynchronous JavaScript and XML". It is a web application programming technique used to create more interactive web applications. Initially created by Jesse James Garrett of Adaptive Path, Ajax uses JavaScript and the built in XMLHttpRequest object found in web browsers (Internet Explorer, Mozilla, and Firefox to name a few) to manipulate the DOM object representation of a web page, all without a page refresh. This is a very powerful technique because it saves time and provides a more responsive experience to the user.
Rails RJS Templates
Conventional Rails templates can generate HTML (.rhtml extension files) or XML (.rxml extension files). RJS templates (.rjs extension files) generate JavaScript code that is executed when it is returned to the browser. The JavaScript code generated allows you to perform multiple page updates, without a page refresh, using Ajax. These RJS templates, written in Ruby, are all you need to generate this JavaScript code and allow for some cool Ajax functionality to your Rails application.
Getting Started
You can create a simple Rails application and add RJS support to it. To begin, you need to create a rails app 'rsjtest' by issuing the command 'rails rjstest':
Click here for a larger image.
This creates an 'rjstest' directory containing your initial web application:
Click here for a larger image.
Creating the Web Page You Will Use to Test the RSJ Template
Within the rails application, the models, views, and controllers of the application live in the 'app' directory. Your intention is to create a simple web page that you can test out a sample RJS template. So, begin by creating the page that will you will use to test the RJS Template functionality. Create a file 'index.rhtml' in the 'app/views/rjs' directory. This will be the default page Rails will serve up to the browser when a URL of 'http://localhost:3000/rjs/' is requested from your web browser. Edit the 'index.rhtml' file and add the following:
<html>
<head>
<title>RJS Template Test</title>
</head>
<body>
<h1>RJS Template Test</h1>
<%= javascript_include_tag :defaults %>
<%= link_to_remote("Test out RJS!",
:url =>{ :controller => "rjs", :action => "hello" }) %>
</body>
</html>
The HTML should be familiar, but the rails method calls within the <%= and %> tags need some explanation. The javascript_include_tag directive is a built-in Rails method that tells the layout to use the Rails JavaScript libraries. The link_to_remote method is actually a helper method available in the Rails ActionView::Helpers::PrototypeHelper module. This module provides a set of helpers for calling Prototype JavaScript functions, including functionality to call remote methods using Ajax. It returns a link to a remote action defined by the 'url' parameter. The remote action is called in the background using XMLHttpRequest. The result of that request then can be inserted into a DOM object whose ID can be specified via the 'update' parameter. Your specific method call tells Rails to use Ajax to invoke the 'hello' action of your 'rjs' controller. You do not specify any 'update' parameter because you are not updating the DOM in this example.
Creating the Controller and View
Generate a Controller and View for your test. This controller will be the one defining the action defined in your 'link_to_remote' call specified in the RHTML file. You will be using a controller names 'rjs'. Issue the commands below to create the Controller and View:
Click here for a larger image.
You should now have an 'rjs_controller.rb' file in the 'app/controllers' directory and a 'views/rjs' directory. Edit the 'rjs_controller.rb' file and add an empty 'hello' method:
class RjsController < ApplicationController
def hello
end
end
This method is empty because you are not passing anything on to the view, but are allowing your RJS Template to do its magic.
Creating the RSJ Template
To create your RJS template, you need to create a file named 'hello.rjs' in the 'appsviewsrjs' directory. Edit the file to look like the following:
page.alert "Hello from RJS!"
This will use the JavaScript alert method to print the message "Hello from RJS!". You, however, can add any JavaScript commands or an RJS file.
IE 7
Firefox 2.0
