• Log in

Rise of the PHX

Getting observe_field to update a text_field in Rails

Posted by Gregg on November 13, 2009 in Adventures on the Rails |

I am writing this post as I scoured page after page with out luck and came up with this solution.  Others may already be all over this method or have more eloquent solutions but there people didn’t have their content search engine optimized.  So for those in need here ya go.

I have used observe_field on occasion in great success to update select form elements in form_for and form_tags but ran into trouble an when trying to have one text_fields value influence the value of another text_fields.

The Goal

I wanted to auto populate the city in a text_field  based on the zip code information provided  in the text_field above.  With the city and zip code I am planning  to build a layered Google maps component ( but that is for a later post).  For now if the city could pre-populate based on zipcode provided, and allow for corrections if the user wanted to put in a different city, then I win….  streamers and confetti fall from the ceiling.

What Didn’t Work

<p>
<%= f.label :zipcode, “Zip code” %>: <%= f.text_field :zipcode, :size=>’8′ %>
</p>

<p>
<%= f.label :city, “City (change if zip code lookup is incorrect): ” -%><%= f.text_field :city -%>
</p>

<%= observe_field ‘community_zipcode’,:method => :get,:frequency => 0.25,:update => ‘community_city’,:url => {:controller=>’communities’,:action => ‘getcity’},:with => “zipcode” -%>

Notice above that I tried to reference the DOM id of the text_field I was interested in updating directly.  It did not work as I wished so I moved on to plan B.

Plan B

Plan B involved creating a partial ‘_city_lookup.html.erb’ with contents:

<label for=”community_city”>City (change if zip code lookup is incorrect):</label><input id=”community_city” name=”community[city]” size=”30″ type=”text” value=”<%=@city%>” />

The method or action, in communities_controller.rb is  now set as follows:

def getcity
unless request.xhr?
flash[:error] = ‘Invalid page’
redirect_to “/”
else
location = ZipCode.find(:first,:conditions=>['zip=?',params[:zipcode].to_i]) rescue nil
@city= location.blank? ? ‘no zipcode match’ : location.city
render :partial=>’city_lookup’, :layout => false, :locals => {:city => @city}
end
end

The new view code, notice the ‘id’ of ‘city_lookup’ now on the paragraph holding the text_field we are interested in updating.  Our partial now will replace the contents of this paragraph when a change is made in the zip code field.

<p>
<%= f.label :zipcode, “Zip code” %>: <%= f.text_field :zipcode, :size=>’8′ %>
</p>
<p id=”city_lookup”>
<%= f.label :city, “City (change if zip code lookup is incorrect): ” -%><%= f.text_field :city -%>
</p>
<%= observe_field ‘community_zipcode’,:method => :get,:frequency => 0.25,:update => ‘city_lookup’,:url => {:controller=>’communities’,:action => ‘getcity’},:with => “zipcode” -%>

That’s all folks.  I will update once site is online for working examples.