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

By Michael Benedict	Article Rating:
October 5, 2008 03:45 PM EDT	Reads:	4,893

Related
Print
Email
Feedback
Add This
Blog This

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.

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

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

    <body>
    </body>
    </html>

CIO, CTO & Developer Resources

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>
```
    <html>
    <head>
    ...
    <script src="/javascripts/prototype.js?1219423129" type="text/javascript"></script>
    <script src="/javascripts/effects.js?1219423129" type="text/javascript"></script>
    <script src="/javascripts/dragdrop.js?1219423129" type="text/javascript"></script>
    <script src="/javascripts/controls.js?1219423129" type="text/javascript"></script>
    <script src="/javascripts/application.js?1219423129" type="text/javascript"></script>
    ...
    </head>
    </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.