AJAX rendered select doesn't get submitted

I have implemented the AJAX observe_field to filter the state/province
options
in my address form. This works great except when I submit the form,
@params
doesn’t contain the select element.

_address_form.rhtml relevant snippet:

<%= collection_select(:address, “country”, Country.find(:all, :order =>
“position”), :code, :name, {:prompt => “-- Select Country --”}, {:class
=>
“siteText”, :style => “width: 175px;”}) %>
<%= observe_field(“address_country”,
:frequency => 0.25,
:update => “address_state_container”,
:url => {:controller => ‘state’, :action =>
:filtered_state_select},
:with => “‘country_code=’ + value”)
%>


StateController#filtered_state_select

def filtered_state_select #ajax action
country = Country.find_by_code(@params[“country_code”])
@state_groups = StateGroup.find_all_by_country_id(country.id)
@state_groups.each {|g| g.name = ‘- ’ + g.name + ’ -’}

render(:partial => 'options')

end


_options.rhtml partial that gets rendered:


– Select State/Province –
<%=
option_groups_from_collection_for_select(@state_groups,
:states, :name, # <- groups
:code, :name, nil) # <- items
%>


contents of @params on form submit

Parameters: {“user”=>{“name”=>"", “fax_number”=>"", “company_name”=>"",
“password_confirmation”=>"", “phone_number”=>"", “password”=>"",
“email”=>""},
“x”=>“48”, “y”=>“10”, “action”=>“create_account”,
“controller”=>“breeder”,
“address”=>{“city”=>"", “postal_code”=>"", “country”=>“US”,
“street_ext”=>"",
“street”=>""}}

I had another, more AJAX experienced railer review my code. In the
process we
discovered that the code works in IE6 but fails in Firefox. I don’t know
if this
is a prototype bug or if I’m missing some larger issue. As far as I
know, there
should be no issue dynamically altering the form on the client-side with
AJAX.

I’m still fishing for answers, but at least I’m confident the code is
correct.

Another railer that I’m working with finally resolved this issue. It
seems that
Firefox prefers CSS-based layouts over Table-based layouts. When I
switched over
to using a purely CSS layout, everything worked fine.

So, if you are seeing a problem submitting AJAX rendered elements in a
form, try
to avoid using Tables to layout the form.

jason cartwright wrote:

Another railer that I’m working with finally resolved this issue. It
seems that
Firefox prefers CSS-based layouts over Table-based layouts. When I
switched over
to using a purely CSS layout, everything worked fine.

So, if you are seeing a problem submitting AJAX rendered elements in a
form, try
to avoid using Tables to layout the form.

…and finally using tables for layout fires back to the designer…

even being a weird bug, it’s a userful one to teach not to use tables
for layout.

Form Layout 101:
Use floated labels with CSS-specified width and right-aligned text.

Boy, what a coincidence, just had the same problem over here and
wondering what to do. This is really a weird bug.

even being a weird bug, it’s a userful one to teach not to use tables
for layout.

But we need a table, not to do layout (all our layout is pure CSS) but
it’s a table. Of course you can fake tables with CSS, but using CSS
layout to build tables is just as evil as using tables for layout.

I hope its just a prototype bug.

Cheers,

Erik.