AJAX rendered select doesn't get submitted


#1

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”=>""}}


#2

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.


#3

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.


#4

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.


#5

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.