page.select when element has multiple classes

I am trying to create an expanding/collapsing table to navigate nested
resources. To do this I have opted to use set of nested lists and I
am formatting them to look like a table using CSS. A row looks like
this...

<ul id="property_Product Line" class="showing dark row"
style="display: none">
  <li class="type_col"></li>
  <li class="property_col">Product Line <a href="/assembly_types/5/
properties/8">Show</a></li>

  <li class="value_col"></li>
  <li class="edit_col"><a href="/assembly_types/5/properties/8/
edit">Edit</a></li>
  <li class="delete_col"><a href= blahblahblah>Delete</a></li>
</ul>

I am trying to collapse a section of the table. I have a css class
"showing" that just denotes that a row needs to be hidden in exactly
this situation. In my RJS file I am trying to use the following code,
but it doesn't seem to be working. Any ideas as to why?

page.select('.showing').each do |row| row.visual_effect :blind_up end

I know that the class is there (the code above is copied from the
browser source) and I know the RJS is being executed (other code in
it runs great.) My thought is that I am using page.select incorrectly.

What does the generated javascript look like ?

Fred

How do I figure that out?

Garrett Berneche wrote:

How do I figure that out?

On Oct 24, 5:48�am, Frederick Cheung <frederick.che...@gmail.com>

You should be able to see it if you look at the source of the page. You
might also check your logs to see if any kind of error is being thrown.

How do I figure that out?

Firebug can show you that (in the bit where you see responses to
requests). I can't remember if the magic proxy object that comes back
from page.select allows you to do visual_effect. You may just have to
call the method directly (ie page.select('foo') {|element|
element.blindUp} or something like that)

Fred

I think I have a handle on my problem now, but I don't know how to fix
it.

A user clicks one of several "show" buttons to expand a section of the
table. The js.rjs file blinds_up whatever is showing, redraws the
whole table (to get the new rows we want to expand, with
style="display:none") and then calls blind_down on all the new rows.
I wasn't thinking asynchronously enough, the blind_up never seems to
happen because as soon it starts, we replace the whole table. that is
to say, the rows i am trying to hide are blown away before we see them
get hidden. So, how do I give the blind_up time to finish?

Garrett

I think I have a handle on my problem now, but I don't know how to fix
it.

A user clicks one of several "show" buttons to expand a section of the
table. The js.rjs file blinds_up whatever is showing, redraws the
whole table (to get the new rows we want to expand, with
style="display:none") and then calls blind_down on all the new rows.
I wasn't thinking asynchronously enough, the blind_up never seems to
happen because as soon it starts, we replace the whole table. that is
to say, the rows i am trying to hide are blown away before we see them
get hidden. So, how do I give the blind_up time to finish?

Generall you want to play around with the effect queue settings and
the afterFinish option, however at this point it's usually easier to
stop using rjs and just write the javascript yourself.

Fre