# How to sort a collection of items in the index page

**URL:** <https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440>\
**Category:** Rails\
**Created:** [March 10, 2008, 4:16am UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440 "2008-03-10T04:16:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kei\_Simone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/839c29/32.png) [@Kei\_Simone](https://www.ruby-forum.com/u/Kei_Simone)\
**Post date:** [March 10, 2008, 4:16am UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440/1 "2008-03-10T04:16:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Kei\_Simone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/839c29/32.png) [@Kei\_Simone](https://www.ruby-forum.com/u/Kei_Simone)\
**Post date:** [March 10, 2008, 1:57pm UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440/2 "2008-03-10T13:57:26Z")

</div>

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

Choose category \<%= select :item, :category\_id, [... however you select categories ...] %\> \<%= observe\_field 'item\_category\_id', :url=\>items\_path %\>
## Items

\<%= render :partial =\> 'items' %\>

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

) 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.

---

<div class="post-metadata">

**Author:** ![Kei\_Simone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/839c29/32.png) [@Kei\_Simone](https://www.ruby-forum.com/u/Kei_Simone)\
**Post date:** [March 10, 2008, 3:06pm UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440/3 "2008-03-10T15:06:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Kei\_Simone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/839c29/32.png) [@Kei\_Simone](https://www.ruby-forum.com/u/Kei_Simone)\
**Post date:** [March 12, 2008, 4:51am UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440/4 "2008-03-12T04:51:56Z")

</div>

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%\>

 \<%= item.name %\> \<%= item.category %\> \<%= item.size %\> \<% 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.

---

<div class="post-metadata">

**Author:** ![Kei\_Simone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/839c29/32.png) [@Kei\_Simone](https://www.ruby-forum.com/u/Kei_Simone)\
**Post date:** [March 12, 2008, 5:34pm UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440/5 "2008-03-12T17:34:40Z")

</div>

content\_tag\_for is a Rails 2.x idiom. That code is equivalent to the  
following:

- item.name

---

<div class="post-metadata">

**Author:** ![Kei\_Simone](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/k/839c29/32.png) [@Kei\_Simone](https://www.ruby-forum.com/u/Kei_Simone)\
**Post date:** [March 17, 2008, 3:57pm UTC](https://www.ruby-forum.com/t/how-to-sort-a-collection-of-items-in-the-index-page/131440/6 "2008-03-17T15:57:01Z")

</div>

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