Here’s my situation. I’ve got a select form that I’m populating with a
list of colors. I then have a database with a list of products, and each
product has a specific color. Some colors have multiple products (ie.
there are several “green” products). Based on what color the user
selects, I then want to display (below the form) a list of all products
that match that color. What I’d like to have happen is, rather than
clicking on one of the options and hitting submit, I’d like the page to
(via AJAX) update when I click one of the options. Does anyone have any
suggestions on how to do this? Thanks for the help!
Brandon Robison wrote:
Here’s my situation. I’ve got a select form that I’m populating with a
list of colors. I then have a database with a list of products, and each
product has a specific color. Some colors have multiple products (ie.
there are several “green” products). Based on what color the user
selects, I then want to display (below the form) a list of all products
that match that color. What I’d like to have happen is, rather than
clicking on one of the options and hitting submit, I’d like the page to
(via AJAX) update when I click one of the options. Does anyone have any
suggestions on how to do this? Thanks for the help!
You have two options, you can add an AJAX.updater to the select tag
using the onchange hook, or you can use an observer to monitor the
select list for changes.
Using the onchange hook will produce cleaner generated HTML, but uglier
ruby in rhtml. It does have the advantage of reducing the number of ajax
calls being made to the controller, since it only makes a call once you
select an option.
rhtml
<%= select :page, :colors, [“red”, “blue”, “green”],
{ include_blank => true },
{ :onchange => “new Ajax.Updater(
‘div_id_to_update’,
‘/controller/method’,
{method: ‘get’,
parameters: pars
});”
}%>
any response sent back from the controller will be placed in the div.
send back plain text, a partial or a rendered layout… experiment and
LEARN.
Using an observer produces nice snappy ruby rhtml, but it’s harder to
see whats going on by looking at the generated HTML. Also if your
worried about traffic you’ll have issues with it sending a request for
each change in the list (ie. as your scrolling through it).
rhtml
<%= select :page, :colors, [“red”, “blue”, “green”], {include_blank =>
true} %>
<%= observe_field(:page_colors,
:frequency => 0.5,
:update => “div_id_to_update”,
:url => { :action => “method in controller” },
:with => “‘color=’ + value”)
%>
watch out for the :with clause, as it gets parsed into text on the page
and evaluated as javascript. so the resulting javascript would be
‘color’ + value
where value is the selected option in the list, and color is the name of
the request parameter.
these links should help
http://www.rubyonrailsblog.com/articles/2006/10/04/ruby-on-rails-cheat-sheet-collectors-edition
if your still having issues i’d recommend picking up the Pragmatic Ajax
book, or Agile Web D. with Rails (another Pragmatic book).