Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Message Forum: Ajax-Enabled Rails Applications - Ruby on Rails

Chapter: Internet & World Wide Web HOW TO PROGRAM - Rich Internet Application Server Technologies - Ruby on Rails

| Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail |

Message Forum: Ajax-Enabled Rails Applications - Ruby on Rails

Adding Ajax functionality to Rails applications is straightforward. Rails includes a Java-Script library called Prototype that contains easy-to-use cross-browser Ajax functions.

Ajax-Enabled Rails Applications

 

Adding Ajax functionality to Rails applications is straightforward. Rails includes a Java-Script library called Prototype that contains easy-to-use cross-browser Ajax functions. Figure 24.42 is the modified layout for the forum file, which now links the prototype li-brary to the application. For the application to have the correct look, make sure you insert the modified style sheet, which can be found in our examples folder, into the public/ stylesheets directory of the application.

 

1     <?xml version = "1.0" encoding = "utf-8"?>

 

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

 

3           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

4              

5     <!-- Fig. 24.42: app/views/layouts/forums.rhtml -->

 

6     <!-- Forums layout that uses the default JavaScript libraries. -->

 

7     <html xmlns = "http://www.w3.org/1999/xhtml">

 

8     <head>

 

9           <title>Forums: <%= controller.action_name %></title>

 

10          <%= stylesheet_link_tag 'scaffold' %> <!-- link to a stylesheet -->

 

11          <%= javascript_include_tag :defaults %>

 

12    </head>

13    <body>

14          <div style = "text-align: right">

 

15                 <% if ( session[ :user ] ) then %> <!-- if user is logged on -->

 

16                       <!-- code to display if user is logged on -->

 

17                       <%= "Logged In As #{ session[ :user ].name }: " %>

 

18                       <%= link_to 'Log Out',

19                              :controller => 'users', :action => 'logout' %>

 

20                 <% else %> <!-- user is not logged on -->

 

21                       <!-- code to display if user is not logged on -->

 

22                       <%= "Not Currently Logged In:" %>

 

23                       <%= link_to 'Log In',

24                              :controller => 'users', :action => 'admin' %>

 

25                 <% end %> <!-- end if -->

 

26          </div>

 

27          <p style="color: green"><%= flash[ :notice ] %></p>

 

28          <p style="color: red"><%= flash[ :error ] %></p>

29

30          <%= yield %> <!-- displays template -->

 

31    </body>

 

32    </html>

 

Fig. 24.42 | Forums layout that uses the default JavaScript libraries.

 

Line 11 links in the JavaScript library using the javascript_include_tag helper method. The defaults parameter tells javascript_include_tag to link all the defaults JavaScript Rails libraries including Prototype and Script.aculo.us. The rest of the layout file is the same as in the non-Ajax version.

 

Figure 24.43 changes the Forum object’s list view to perform Ajax requests rather than load a new page. Now, whenever the user clicks a forum’s name, the page loads the forum’s messages to the right of the forums list with a partial page update.

 

1     <!-- Fig. 24.43: app/views/forums/list.rhtml -->

 

2     <!-- Displaying a list of messages without reloading the page. -->

 

3     <h1>Deitel Message Forums</h1>

 

4     <div class = "forumList">

 

5           <h2>Available Forums</h2>

 

6           <ul>

 

7                  <% for forum in @forums %>

 

<li>

9 <%= link_to_remote ( forum.name,           

10        { :url => { :controller => 'messages', 

11        :action => 'list', :forum_id => forum.id },      

12        :update => 'currentForum' }, 

13        { :class => ( forum.created_on < 5.minutes.ago ?     

14        'recent': nil ) } ) %>

15                       </li>

 

16                 <% end %>

 

17          </ul>

 

18          <% if ( session[ :user ] ) then %>

 

19                 <h2>Forum Management</h2>

20                 <ul>

 

21                       <li><%= link_to 'Add a Forum', :action => 'new' %></li>

 

22                       <li><%= link_to 'Delete a Forum', :action => 'delete' %></li>

 

23                 </ul>

 

24          <% end %>

 

25    </div>

 

26    <div id = 'currentForum' class = "ajaxComponent">

27    </div>


Fig. 24.43 | Displaying a list of messages without reloading the page.

 

The key change is lines 9–12, which have been changed to call the link_to_remote helper method instead of the link_to helper method. The link_to_remote method allows us to link to JavaScript that we included in the layout file. By specifying the url and update parameters inside the link_to_remote method we are telling Rails to convert these tags into prototype Ajax.Updater objects that will update the page asynchronously. The url argument (line 10) specifies the controller in which to look for the action. The action parameter (line 11) specifies the action to invoke. The forum_id parameter (line 11) specifies the id to pass to the action. Line 12 specifies currentForum as the id of the placeholder div in the page that needs to be updated. Lines 26–27 define the placeholder div element where the list of messages will be inserted. The rest of the code is the same as in the non-Ajax version of this application.

 

In similar fashion, we modify the list and new views of the message object, to be able to add a message to a forum without reloading the page. First we include all the default JavaScript libraries in the message.rhtml layout file (not shown here), ensuring all the views in the message object have access to Prototype. After that we modify all the calls to other actions to be asynchronous. Figure 24.44 is the updated list.rhtml.

 

1     <!-- Fig. 24.44: app/views/messages/list.rhtml -->

 

2     <!-- Forum that allows the user to add a message on the same page. -->

 

3     <div class = "messageList">

 

4     <table style = "width: 400">

5     <tr class="msgHeader">

6     <td><%= @forum.name %></td>

 

7     </tr>

 

8     <% for message in @messages %>

 

9     <tr class="msgTitle">

10  <td>

11        <strong><%= message.title    %></strong><br/>

12        by <em><%= message.author            %></em> at

13                              <%= message.created_on.strftime( "%m/%d/%Y at %I:%M%p" ) %>

 

14                       </td>

 

15                 </tr>

 

16                 <tr class="msgPost">

 

17                       <td><%= message.message %></td>

 

18                 </tr>

 

19          <% end %>

 

20    </table>

21

22    <%= link_to_remote 'New message',

 

23          :url => { :action => 'new' },

 

24          :update => 'currentForum'%>

25          </div>


 

Fig. 24.44 | Forum that allows the user to add a message on the same page

Lines 22–24 use the link_to_remote helper method to allow the user to add new messages without reloading the page. The url is the new action, which returns the form and the placeholder to update is currentForum, defined in the list.rhtml view of the forum object (Fig. 24.43). The new view is also modified, so that once the user submits the new message, the updated div named currentForum is shown without reloading the page. Figure 24.45 shows the modified new.rhtml.

 

Lines 3–7 have been changed to use the form_remote_tag helper method, which redirects the client to the next action without reloading the page. Once the user clicks the Submit button, generated by submit_tag (line 6), the form will generate a Prototype Ajax.Updater object that will send the data to the action specified and display the result in the specified placeholder. This placeholder is set to currentForum, the same element inside which this forum will be displayed. When the user finishes adding the new message, a new forum will replace this form, without reloading the page. Lines 8–9 provide the user a way to cancel the new-message operation, in which case the original forum displays.

 

1    <!-- Fig. 24.45: app/views/messages/new.rhtml -->

 

2    <!-- Allows the user to add a new message without reloading the page. -->

 

3    <%= form_remote_tag :url=> { :action => 'create' },

 

4          :update => 'currentForum' %>

 

5          <%= render :partial => 'form' %>

 

6          <%= submit_tag "Create" %>

 

7    <%= end_form_tag %>

 

8    <%= link_to_remote 'Cancel', :url=> { :action => 'list' },

 

:update => 'currentForum' %>



Fig. 24.45 |  Adding a new message without reloading the page

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.