Home arrow Ruby-on-Rails arrow Page 4 - Ruby-on-Rails and AJAX
RUBY-ON-RAILS

Ruby-on-Rails and AJAX


Java and Flash offer real alternatives for those trying to build web applications that function more like desktop applications. However, they have their shortcomings. AJAX overcomes these shortcomings -- especially if you use Ruby on Rails.

Author Info:
By: A.P.Rajshekhar
Rating: 5 stars5 stars5 stars5 stars5 stars / 31
March 27, 2007
TABLE OF CONTENTS:
  1. · Ruby-on-Rails and AJAX
  2. · AJAX: an Overview
  3. · Implementing AJAX
  4. · Ruby-on-Rails and AJAX

print this article
SEARCH DEVARTICLES

Ruby-on-Rails and AJAX - Ruby-on-Rails and AJAX
(Page 4 of 4 )

In real world applications one of the most required functionalities is to populate a combo box based on the data entered in a preceding field such as a text box or another combo box. In this example, I will be developing such a part for an application. This can be used with any application with slight modifications. It contains two components:

index.rhtml - the view which contains the combo box to be filled and the
                     combo box on the basis of which the filling has to be done

PopulateController - the controller containing the action required for the
                                 populating of the combo box.

Here is the index.rhtml:

<html>
 
<head>
   
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
   
<%= javascript_include_tag "prototype" %>
   
<title>Ajax Rails &amp; Select lists</title>
 
</head>
 
<body>
   
<%= form_remote_tag(:update => "sel_con",:url => {
      :action => :create_select },
      :position => "top",:success => "$('sel_con').innerHTML=''" ) %>
   
<p>
     
Please select a sports category:
   
</p>
   
<p>
     
<%= select_tag "categories",
     
"<option>Team</option><option>Individual</option>" %>
   
</p>
   
<div id="sel_con"></div>
    
<p>
     
<%= submit_tag "Show Sports" %>
   
</p>
   
<%= end_form_tag %>
 
</body>
</html>

The combo box contains two values, team and individual. Based on the selection the second combo has to be populated and shown at the div having the id sel_con. If team is selected by the user, the second combo box would be filled with team events whereas in the case of individual, individual event is populated. The form_remote_tag is passed four parameters: the id of element to be updated, the action to be called, the position in which to place the result and what has to be done if the request is successfully executed. In this case the inner HTML is set to no value i.e. "". Next is the controller:

class PopulateController < ApplicationController
 
def index
 
end

  def create_select

    indArr=["Nordic Skiing", "Inline Skating","Tennis",
      "Triathlon","Road Racing","Figure Skating",
      "Weight Lifting","Speed Skating","Snowboarding"];
   
teamArr=["Soccer","Basketball","Football","Hockey",
      "Baseball","Lacrosse"];
   
str="";

    if params[:categories].index('Team') != nil
     
render :partial => "options",
       
:locals => { :sports => teamArr,:sptype => "team"}
   
elsif params[:categories].index('Individual') != nil
     
render :partial => "options",
       
:locals => { :sports => indArr, :sptype => "individual" }
   
else
     
str="<select id='individual' name='individual'>
          
<option>unknown</option></select>";
     
render :text => str;
   
end

    #end method
  end
 
#end class definition
end

The create_select is the action where the logic for creating and populating the second combo box goes. First it creates two arrays with team and individual sports events. Then based on the parameter received, the combo box is created and populated. This is done in the statement

render :partial => "options",
:locals => { :sports => teamArr,:sptype => "team"}

Now let's look at _options.rhtml which is a partial template i.e. the a piece of HTML code that can be used again and again. Here is the code:

<select id="<%= sptype %>" name="<%= sptype %>">
<% sports.each do |sport| %>
<option><%= sport %></option>
<% end %>
</select>

It first gives the combo box an id, iterates through the array passed and populates the combo box. That's it. This completes the application. Though I had mentioned four libraries, I have introduced only one of them. In the next discussion, I will be focusing on UI using the other three libraries. Till then..


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
RUBY-ON-RAILS ARTICLES

- Ruby-on-Rails Faces Second Security Flaw in ...
- Ruby 2.0 Prepped for February 2013 Release
- Why LinkedIn Switched from Ruby on Rails
- Adding Style with Action Pack
- Handling HTML in Templates with Action Pack
- Filters, Controllers and Helpers in Action P...
- Action Pack and Controller Filters
- Action Pack Categories and Events
- Logging Out, Events and Templates with Actio...
- Action Pack Sessions and Architecture
- More on Action Pack Partial Templates
- Action Pack Partial Templates
- Displaying Error Messages with the Action Pa...
- Action Pack Request Parameters
- Creating an Action Pack Registration Form

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 

Developer Shed Affiliates

 




© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials