Adam C. Hegedus web design, programming, networking… but mostly just life

Ajaxed Select Boxes in Rails

The controller for this exercise includes two methods. One for displaying the main page, and a second for generating the select box. Let's start with the page. We'll call it order_list:

def order_list

end

That was easy. Nothing here. You'll see why in the view.

Now for the second method to populate the second select box:

def fill_orders_box
results = Order.find_all_by_customer_id(@params[:customer_id])
render :partial => 'options'
end

There's a few things here that I wanted to comment on. The first is the find command on the Order model. ActiveRecord does this very slick translation when you use the findallby_ or findby followed by the column to search on. When ActiveRecord sees this, it automagically translates it to the equivalent search string. For instance the above example translates to:


@results = Order.find(:all,
:conditions => ["customer_id = ?", @params[:customer_id])


Now let's be honest... that's pretty cool.

The second thing is the use of the partial. In this example I'm using a partial to fill in the select box option tags. This command makes that happen.

Enjoy the View

The view is where I create the form and put in the first select box, the placeholder for the second select box and the AJAX commands to tie them all together. Here's the code:

<%= javascript_include_tag "prototype" %>
<select id="order[customer_id] name="order[customer_id]">
<%= options_from_collection_for_select(
Customer.find_all_by_customername, "id", "customername") %>
</select>

<span id="order_id_list">
<select id="order_id" name="order[id]"></select>
</span>

<%= observe_field("order[customer_id]",
:frequency => 0.25,
:update => "order_id_list",
:url => {:action => :get_orders},
:with => "'customer_id='+value")
%>


So theres a few things to discuss here. At the top is the javascript_include tag. This is telling the view to use the prototype javascript file in the rails package to handle the AJAX calls. Don't forget this, it's what you call 'important'.

The first select box is straight-forward, but it's filled with another slick rails deal. Optionsfromcollectionforselect takes the first parameter (note the findallby thing again) to get the recordset to fill it with (hence nothing in the controller for this), the id field is next, and lastly the text for the option statement. Very slick indeed!

Next we have the placeholder for the second select box. In this case I used a span, but div will work too. Then I put an empty select box so that it's there from the start, you can leave this out if you want it to appear when you click a customer in the first box. Also worth mentioning here is something Rory said on his site, you can't change the innerHTML of a select box in IE, so that's the reason for the span, we'll change what's in there with the partial.

Now for the AJAX. The last part is the listener. This makes it so the page is always looking for the first select box to change. It looks at the frequency of once ever .25 seconds. When it senses a change, it calls the URL with the included with value as a key and updates the orderidlist span. There's a bunch of magic that happens in the background, but let's face it, that's the best part about rails!

Partial Credit

The last part is the partial. This file is called _options.rhtml. Note the underscore...this is what makes a partial a partial. Because DHH said so.

<select id="order_id" name="order[id]">
<% for order in @results do -%>
<option value="<%=order.id %>" >
<%= order.order_number %>
</option>
<% end -%>
</select>


That's it. Here we generate the select box, loop through the records that are sent from the controller and create a slew of option tags.

So there you have it. As I said before, I'm fairly new to rails and ruby, so if you find flaws in my code (which shouldn't surprise you) please leave a comment and let me know. I hope this helps someone!