how to sort a collection of items in the index page

Hi all,

i have the following:

items_controller
index.rhtml for the items

inside the items_controller i have a def index method where @items
contains a collection of items

inside teh index.rhtml i display the items using the for loop for the
@items

i need a mechanism to display a partial list of items depending on
some input from user.

each item has a category attribute. i wanted to have a drop down list
that contains all possible category values. depending on the selection
of the category value i will then display the items accordingly.

example:

item1 mugs
item2 mugs
item3 paper
item4 towels

inside my drop down list i would have 4 values of "All", "mugs",
"paper" and "towels"

i manage to create such a drop down list.

Now the problem is how do i alter the display of the items according
to the selected value?

I dont mind not using drop down list in favour of something else more
elegant.

Please advise.

Thank you.

This is somewhat difficult to answer because you don't tell us much
about your solution. Do you want to use ajax or do a full postback?
What does the markup look like? You'll need to supply more of these
details in the future.

Here's one solution (untested). I'll explain as I go:

items/index.html.erb

<fieldset><legend>Choose category</legend>
<%= select :item, :category_id, [... however you select
categories ...] %>
<%= observe_field 'item_category_id', :url=>items_path %>
</fieldset>

<h2>Items</h2>
<ul id="item_list">
<%= render :partial => 'items' %>
</ul>

items/_items.html.erb
<% @items.each do |item| %>
<% content_tag_for :li, item, item.name %>
<% end %>

The combination of the two forms above should work together to render
your initial list as you already have it coded. The items will be
placed into an unordered list. The key is the "observe_field" call
which adds some javascript that will look for changes in the select
field (drop-down) and send them back to the server automatically. I
am suggesting that you send this back to the same #index action to
keep the public interface small.

class ItemsController < ApplicationController
  def index
    find_options=>{:order=>:name}
    find_options.merge :conditions=>{:category_id=>params[:value]} if
params[:value]
    @items = Item.find(:all, find_options)

    respond_to do |format|
      format.html # index.html.erb
      format.js { render(:update){|page| page.replace_html
'item_list', :partial=>'items'}
    end
  end
end

The controller action is a little different. First, it creates a hash
with :order=>:name to make sure the items are sorted by name. Next,
it adds :conditions=>{:category_id=>params[:value]} to it if
supplied. This basically says that if a category was supplied then
limit the find to that category, otherwise return all the items.

The format.js line is also new. The observe_field is submitting the
request via ajax and is expecting a javascript (js) response so the
effect of the line is to render that back. Specifically, the code
renders back a small javascript that tells the page to find the
element named 'items_list' (the <ul>) and replace its contents with
the result of rebuilding the _items partial with a restricted
collection of items.

It's worth pointing out that the render(:update) code could be handled
differently. You could create an index.js.rjs file to handle that.
If you do, then the render(:update) part is handled for you by the
framework -- you'll only need to have the page.replace_html line in
the file. That may be an advantage if you find that you need to do
more work on the page than just rebuild the list. Personally I do not
mind putting one or two lines of rjs code in the controller though it
*is* mixing view and controller logic in one place. Purists would
never do that, even for one line.

Good luck.

Wow!
That sounds almost exactly like the answer to a question I was just
about to ask! Perhaps that's because I interpreted the OP's problem
to be almost exactly like the problem I wanted to solve. Namely, I
want the list of records displayed to be narrowed down based on a
user's selection from a drop down box.

The "almost exactly" part comes in to play because I am using
ActiveScaffold to display my records. (As a n00b to just about
everything browser related, it is the simplest way I could find to
display my table, make it pretty, and make it searchable).

I will go off now and meditate on the answer you provided to see
if/how I can apply it to displaying the records in my table, but, in
the mean time, is it possible to get some pointers on how/if this
applies to ActiveScaffold?

TIA...

--wpd

Hi,

Sorry that i did not include more details in my first post. Apologies.

initially inside the index.rhtml , i had the following to display for
all the items

<% for item in @items%>
  <tr>
    <td><%= item.name %></td>
  <td><%= item.category %></td>
  <td><%= item.size %></td>
  </tr>
<% end %>

1) i have no preferences for either full post back or ajax. if i have
to choose, i would like ajax, but so long as i get the results i want,
its ok

2) i tried your method with the ul tags but i get a undefined method
for content_tag_for

Please advise .

Thank you.

content_tag_for is a Rails 2.x idiom. That code is equivalent to the
following:

<li id="item_<%= item.id %>">item.name</li>

I am sorry to bother you again AndyV,

but it did not work.

I am wondering whether this has anything to do with the line

format.js { render(:update){|page| page.replace_html
'item_list', :partial=>'items'}

Because my list is absolutely empty when no matter my choice of the
drop down.

Can anyone advise?

Thanks