Page.select when element has multiple classes


#1

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…

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.


#2

On Oct 23, 8:02 pm, Garrett B. removed_email_address@domain.invalid
wrote:

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


#3

How do I figure that out?

On Oct 24, 5:48 am, Frederick C. removed_email_address@domain.invalid


#4

Garrett B. wrote:

How do I figure that out?

On Oct 24, 5:48�am, Frederick C. removed_email_address@domain.invalid

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.


#5

Wow, I am lost on this one.

I installed Firebug, seems kinda awesome. Wish I had done this
before. I don’t know what you mean about seeing responses to requests
though, and I still can’t find any js that looks relevant. I am not
getting any errors in my logs, and I see no js at all in my
source…except that that is used to confirm a delete.

Garrett

On Oct 24, 10:57 am, Frederick C. removed_email_address@domain.invalid


#6

On 24 Oct 2008, at 09:22, Garrett B. wrote:

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


#7

try {

$$(".showing").each(function(value, index) {

value.visualEffect(“blind_up”);

});

On Oct 24, 12:24 pm, Garrett B. removed_email_address@domain.invalid


#8

Wow, I am lost on this one.

I installed Firebug, seems kinda awesome. Wish I had done this
before. I don’t know what you mean about seeing responses to requests
though, and I still can’t find any js that looks relevant. I am not
getting any errors in my logs, and I see no js at all in my
source…except that that is used to confirm a delete.

Garrett

On Oct 24, 10:57 am, Frederick C. removed_email_address@domain.invalid


#9

try {

$$(".showing").each(function(value, index) {

value.visualEffect(“blind_up”);

});

On Oct 24, 12:24 pm, Garrett B. removed_email_address@domain.invalid


#10

My whole js.rjs looks like this;

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

page.replace “types_table”,
:partial => “assembly_types/types_table”,
:locals => { :assembly_types => @assembly_types }

for property in @properties do
page[“property_#{h property.name}”.to_sym].visual_effect :blind_down
end

I am thinking that this would blind_up the “showing” rows that I want
to hide, redraw the table (with the divs i want to show hidden) then
blind_down the rows I want to show now. Does the replace happen at
the same time as the the blind_up, making it look like the blind_up
isn’t working?

On Oct 24, 12:40 pm, Garrett B. removed_email_address@domain.invalid


#11

try {

$$(".showing").each(function(value, index) {

value.visualEffect(“blind_up”);

});

On Oct 24, 10:57 am, Frederick C. removed_email_address@domain.invalid


#12

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

On Oct 23, 3:02 pm, Garrett B. removed_email_address@domain.invalid


#13

On Oct 24, 7:07 pm, Garrett B. removed_email_address@domain.invalid
wrote:

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