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 & 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. |
