Michael Benedict

Subscribe to Michael Benedict: eMailAlertsEmail Alerts
Get Michael Benedict: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


Related Topics: RIA Developer's Journal, AJAX World RIA Conference

RIA & Ajax: Article

AJAX in Ruby on Rails with Prototype, Script.aculo.us

Look at the Script.aculo.us wiki to know more about other effects and their parameters.

Step 2 - Create a Controller

After creating the new application, we need to create a controller. lets call the controller ajaxfunctions. I hope you guys know how to create a controller.

    ruby script/generate controller ajaxfunctions index

The above code will create a controller called ajaxfunctions which will have a method called index, respectively index.rhtml OR index.html.erb will be created inside the view/ajaxfunctions folder.

Step 3 - Editing the view file

Once you open it, you`ll notice that its empty. This is our template, basic HTML would suffice. So type out an html page here or you can use the one below.


  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    >
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

Great. Now firstly, to implemenet AJAX in RoR , we need to initialize it.

Initializing the Ajax code

You must include the javascript code in your view template file (i.e index.rhtml in our case) for the Ajax functions to be available in that view. The best place for this is in the <head> tag.

You can either use

  • <%= javascript_include_tag :defaults %>
    We`ll be using this. Using this allows for quicker downloads since the script can be cached by the browsers.

    This is the output in the HTML page.

    1. <html>
    2. <head>
    3. ...
    4. <script src="/javascripts/prototype.js?1219423129" type="text/javascript"></script>
    5. <script src="/javascripts/effects.js?1219423129" type="text/javascript"></script>
    6. <script src="/javascripts/dragdrop.js?1219423129" type="text/javascript"></script>
    7. <script src="/javascripts/controls.js?1219423129" type="text/javascript"></script>
    8. <script src="/javascripts/application.js?1219423129" type="text/javascript"></script>
    9. ...
    10. </head>
    11. </html>
  • <%= define_javascript_functions %>
    This pastes all of the required Javascript code right into your view which increases your page size by ~20KB.

Different AJAX Helpers used in View Files

RoR creates the AJAX code for you via helper codes. Firstly

Defination:
What is a Helper ?
Helpers (“view helpers”) are modules that provide methods which are automatically usable in your view. They provide shortcuts to commonly used display code and a way for you to keep the programming out of your views. The purpose of a helper is to simplify the view. It’s best if the view file (RHTML/RXML) is short and sweet, so you can see the structure of the output. Nitty-gritty details are best left to helper methods and partials, where they can be parametrized and used repeatedly.

Note : We can call AJAX via 2 methods i.e 1) Using a button and 2) Normal Links. Then we can add the arguments through which we can achieve to have cool visual effects or perform serious AJAX operations.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.