I always dreaded creating image headers for websites, but always saw the headers as the perfect place to add style and tie the content to the design. Then along came SiFR(www.mikeindustries.com/blog/sifr). I could now embed font in flash and use java script to call upon all the font, and css to provide additional style. Life was very good, besides the sporadic issues with the font not showing up in certain Microsoft browsers, have you heard of them.

But today I again revisited text-replacement and found typeface.js. It is just awesome and strictly a javascript based tool. I just used it for the first time on http://burningtreecellars.com, and it ease of implementation is astounding. If you are on the hunt for a standard based tool for text replacement, I can do nothing but highly recommend it.

Take it for a spin: Typeface.js (http://typeface.neocracy.org/)

Disclaimer: I have yet to run it through the gauntlet of browsers to verify cross browser compatibility but will keep you posted if weirdness rears its ugly head

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.

I have been asked this question on many occasions and my response has varied and often fallen short of best describing what all the twitter is about.  So finding this video gem was very nice.