How To ? change class of DIV


#1

I’m trying to replicate the “green-bar” effect used in the Depot app
using Ajax. And I’m almost there :wink: I’m about to set off on the last
stage and would appreciate any advice that would set me off in the right
direction.

On the page, each record is represented by a

. Each
has id =
“item#{record.id}” with class = either Listline0 or Listline1 which are
defined in my stylesheet to be of different colors. Each
three
s inside. One of the s has a link_to_remote to ‘delete’ the
item. When the link gets used, the record gets deleted from the db and
the
gets deleted from the DOM.

When the user deletes an item, it screws-up the green-bar effect. I
expected that. And I figured there’d be a Rails (i.e., simple) way to
go through the set of remaining

s (preferrably from the point of
deletion down) and reset the class= to fix the effect. I can’t find it.

I see that I can use replace to basically over-write the

but I
can’t find any way to read the content of the
. Without that,
since link_to_remote to ‘delete’ the ingredient has to have the record
id, I can’t see any way to use Ajax to correct the green-bar effect.
That doesn’t seem right. That is, I’ll bet I’m wrong and that one of
you can point me to the piece I’m missing. Sure would appreciate it.

Thanks in advance for any help,
Bill


#2

Hi Bill,

You can change the class of an element with RJS:

page << “$(’#@item_id’).className = ‘#{some_condition ? ‘Listline0’ :
‘Listline1’}’;”

Just iterate over the items you want to update.


Ed Frederick - edwardfrederick.com