Rails Observer Field

Written by Moe on September 11, 2008 | 3 Comments

The Rails observer field is an easy way to add an ajax select menu to your site. Below is an example to get you going.

Problem

Let’s say you have a list of users on your site and want to filter them by a group. In the example we will be using gym members.

View

<%= select "gym", :gym_id, Gym.find(:all).collect { |p| [p.name, p.id]}, {:selected => params[:gym]}  %>
<%= observe_field "gym_gym_id", :url => { :action => :members_by_gym , 
                                          :controller => :members},
                                          :update => "member_list", 
                                          :with => "'gym='+ escape($('gym_gym_id').value)" %>
<div id="member_list">
   <% for member in @members %>
      <%= link_to member.name, member %><br/>
    <% end %>
</div>

The first thing we do is build the select form by using the Rails Select Helper. The id of the select tag is generated by rails, “gym_gym_id”. We need to pass the id name as the first parameter to the observe field. The url parameter is pretty straightforward. The update parameter of the observer field designates which element will be updated. The “:with” parameter adds a parameter to the form named “gym”.

Post

Parameters: {"contoller"=>"members", "action"=>"members_by_gym", "gym"=>"1", "controller"=>"members"}

The “gym” parameter posted here is from the observer_field tag.

Controller

def members_by_gym
     @members = Member.find_all_by_gym_id(params[:gym])
     render :layout => false
  end

It’s important that you add the render :layout => false or bad things will happen. We still have one more thing to do. We have our controller being hit via ajax when the select menu changes but we need to make the html that will be updated on the page. In the view/members folder we need to make a new page called members_by_gym.html.erb

members_by_gym.html.erb

<% for member in @members %>
     <%= link_to member.name, member %><br/>
<% end %>

This code will be interpreted and update the “member_list” element on the page. That’s it. Rails Ajax magic.

3 Comments »

1. Perfect! You’ve successfully cut through all the “blah, blah, blah” crap, and given me exactly what I was looking for. KUDOS!!!!

   Comment by Nathan — November 25, 2008 @ 3:47 pm

2. Thanks Nathan. I try to stay away from the “blah, blah blah”, but admit that I’m a “yada, yada, yada” kind of guy.

   Comment by Moe — January 16, 2009 @ 11:24 pm

3. Thanks a lot for this comment, it took me 5 minutes to configure for my site. I learned great deal !

   Comment by Chema — February 13, 2009 @ 10:27 pm

RSS feed for comments on this post. | TrackBack URI

Leave a comment