Forum: Ruby on Rails Need help with select tags and AJAX

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
Deed9373db75fed25dea3ba12bdfbeb0?d=identicon&s=25 Brandon Robison (mephtik)
on 2007-03-26 21:30
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!
0ec3bf94bce07e41ebe0df6c7edb9521?d=identicon&s=25 Brian Cowdery (bcowdery)
on 2007-03-30 00:33
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
      });"
}%>
<div id="div_id_to_update"></div>

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")
%>
<div id="div_id_to_update"></div>

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...
http://www.sergiopereira.com/articles/prototype.js...

if your still having issues i'd recommend picking up the Pragmatic Ajax
book, or Agile Web Development with Rails (another Pragmatic book).
This topic is locked and can not be replied to.