Interacting select_tags using onchange

Rails
1

my view:

<%= render :partial => "event_category_select" %>

<%= render :partial => "event_category_text_field" %>
<%= render :partial => "event_description_select" %>

<%= render :partial => "event_description_text_field" %>

_event_category_select.html.erb:
<%= select_tag :select_category, options_for_select(@categories,
selected = @selected_category),
{:onchange => remote_function(:url => {:action
=> :select_category}, :with => “select_category”)} %>

_event_category_text_field.html.erb:
<%= text_field_tag :category, @selected_category, :size => 30 %>

_event_description_select.html.erb:
<%= select_tag :select_description, options_for_select(@descriptions,
selected = @selected_description),
{:onchange => remote_function(:url => {:action
=> :select_description}, :with => “select_description”)} %>

_event_description_text_field.html.erb:
<%= text_field_tag :description, @selected_description, :size => 60 %>

controller:

def select_category
@selected_category = params[:value]
search_hash = {:select => “DISTINCT description”}
search_hash[:conditions] = [“category = ?”, @selected_category] if
@selected_category != “”
@descriptions = ["", *Event.find(:all,
search_hash).map(&:description)]
@selected_description = “”
render :update do |page|
page.replace_html “event_category_text_field”, :partial =>
“event_category_text_field”
page.replace_html “event_description_select”, :partial =>
“event_description_select”
end
end

def select_description
@selected_description = params[:value]
@categories = ["", *Event.find(:all, :select => “DISTINCT
category”).map(&:category)]
if @selected_description != “”
selected_event = Event.find(:first, :conditions => [“description
= ?”, @selected_description])
@selected_category = selected_event.category if selected_event
else
@selected_category = “”
end
render :update do |page|
page.replace_html “event_category_select”, :partial =>
“event_category_select”
page.replace_html “event_description_text_field”, :partial =>
“event_description_text_field”
end
end

With ie 7.0 everything’s fine, but with firefox 3.0:

When I select a category, the two ids are replaced. After that, I want
to select a description, but it doesn’t send a request. However,
selecting another category does. The same the other way round, i.e.
when I begin with selecting a description.

The source code is of no avail, because with both browsers it never
changes whatever I select.

Any idea?

Thanks
Luma

2

Hey, do you solved your problem or found a work-around?

If so I’m interested in it because I do have a similar problem.

Thanks.
Flo.

3

sorry, I still didn’t find a solution. I don’t have much experience
with javascript.
Luma

4

From what I can see, the most likely cause of this is that there is an
issue with the dom, such that when you do the update, the browser is
not seeing the fields or ids correctly

A couple of suggstions:

Use firebug to carefully inspect the dom before and after the updates
and make sure the ids are ok and that the elements are structured
correctly.

If you cannot see anything obvious, strip the view code down so that
the only things being rendered are the actual select fields. Then you
should be able to see why the onchange is not firing.

If you get it down to very simple/minimal example that still
demonstrates a problem, post it here and i will see if i can repeat
it.

Tonypm

5

ps.

Looking again at the code, I suspect the problem may be that you are
updating table cells. I think i have seen something similar with ff.
In general, I tend to always update a whole row.

Tonypm

6

  1. You don’t need the form tag if you are only updating by ajax.
    Html purists might argue the point!

  2. You can use any element to update from a partial. For example,
    give the tr an id as in:

then in the controller, page.replace_html :update_me etc.....

  1. Sometime I find it easier to include the

    tag in the partial
    itself, so that the whole row, not just the inner html gets replaced.
    In this case use page.replace :update_me in the controller.

  2. You may find if you get rid of the form tags, that updating
    individual

    s may work, but I would be wary of it.

    hth Tonypm

7

Very nice tool, I didn’t know firebug.

I think I’ve found the reason of the problem: When you update fields
of a form, they forget to which form_tag they belong. (Why do we need
a form_tag for these select_tags, as they are only used for setting
other fields by onchange?)

Updating another partial containing the form_tag doesn’t work, so
you’ve got to update the whole form. But I didn’t find a way to update
a table row: A

can’t be between a and a element,
and a form_tag can’t be between and <% end %>

def select_number
@number = params[:value]
index = [’’,‘1’,‘2’].index(@number) || 0
@letter = [’’,‘a’,‘b’][index]
render :update do |page|
page.replace_html “test”, :partial => “test”
end
end

def select_letter
@letter = params[:value]
index = [’’,‘a’,‘b’].index(@letter) || 0
@number = [’’,‘1’,‘2’][index]
render :update do |page|
page.replace_html “test”, :partial => “test”
end
end

I also included a field ‘additional’ which will also be updated with
the whole form. How can I keep the values of such fields?

Thanks,
Luma

. A simple example:
<%= render :partial => 'test' %>

_test.html.erb:

<% form_tag do %>
number: <%= select_tag :select_number, options_for_select(['','1','2'], selected = @number), {:onchange => remote_function(:url => {:action => :select_number}, :with => "select_number")} %> letter: <%= select_tag :select_letter, options_for_select(['','a','b'], selected = @letter), {:onchange => remote_function(:url => {:action => :select_letter}, :with => "select_letter")} %> additional: <%= text_field_tag :additional, @additional %>
8

Without the form_tag, everything’s fine with IE 7.0. But with firefox
3.0.3, I don’t even get a request. (javascript completely enabled)

<%= render :partial => 'test' %>

_test.html.erb:

<td>
  <%= select_tag :select_number, options_for_select(['','1','2'],

selected = params[:value]),
{:onchange => remote_function(:url => {:action
=> :select_number}, :with => “select_number”)} %>


selected: <%= params[:value] %>

def select_number
render :update do |page|
page.replace_html “test”, :partial => “test”
end
end

And using page.replace with in the partial leads to
something like http://railsforum.com/viewtopic.php?id=21678

Luma

9

You’re right, the problem was just :with => “select_number”

Using :with => “‘value=’+value” works.

Thanks!