Help with RJS to loop through divs and change hyperlinks

I have some rhtml (see below) which includes 5 divs placed under a div
with classname "container". Can somone help me write some RJS to

  a. Find the "container" div
  b. Loop through the 5 child divs and:
    i. Change the innerHTML (text of the hyperlink) of each child div
which is a hyperlink using link_to_remote (I assume something similar
to page.replace_html)
    ii. Change the "url" of each child div to point to another url

Some sample code would be appreciated. I'm not sure where to start
really.

Thanks!
Chirag

                <div class="container">
                    <div class="selsec">
                        <%=link_to_remote("Live!",
                        :update => 'chart',
                        :url => url_for(:controller =>
'chart', :action => 'live'),
                        :loading => "Element.show('loading'); ",
                        :complete => "Element.hide('loading')",
                        :before => "toggleVTabs(this.parentNode);") %>
                    </div>
                    <div class="sec">
                        <%=link_to_remote("Last half hour",
                        :update => 'chart',
                        :url => url_for(:controller =>
'chart', :action => 'last_half_hour'),
                        :loading => "Element.show('loading'); ",
                        :complete => "Element.hide('loading')",
                        :before => "toggleVTabs(this.parentNode);") %>
                    </

                    <div class="sec">
                        <%=link_to_remote("Last hour",
                        :update => 'chart',
                        :url => url_for(:controller =>
'chart', :action => 'last_hour'),
                        :loading => "Element.show('loading'); ",
                        :complete => "Element.hide('loading')",
                        :before => "toggleVTabs(this.parentNode);") %>
                    </div>
                    <div class="sec">
                        <%=link_to_remote("Last 6 hours",
                        :update => 'chart',
                        :url => url_for(:controller =>
'chart', :action => 'last_six_hours'),
                        :loading => "Element.show('loading'); ",
                        :complete => "Element.hide('loading')",
                        :before => "toggleVTabs(this.parentNode);") %>
                    </div>
                    <div class="sec">
                        <%=link_to_remote("All day",
                        :update => 'chart',
                        :url => url_for(:controller =>
'chart', :action => 'all_day'),
                        :loading => "Element.show('loading'); ",
                        :complete => "Element.hide('loading')",
                        :before => "toggleVTabs(this.parentNode);") %>
                    </div>
                </div>

THIS IS WRITTEN MUCH BETTER

I have some rhtml code which includes 5 divs placed under a
"container" div.

I would like to use RJS to do the following, but I'm not sure where to
start really.

1. Find the "container" div
2. Loop through the 5 child divs and:
         a. Change the innerHTML of each child div. Since each child
div is a hyperlink using link_to_remote , this is a little tricky. (I
assume something similar to page.replace_html would be used)
         b. Change the ":url" parameter of each child div to point to
another url

Is this possible with RJS? If so, can you recommend some
JavaScriptGenerator methods or other helper/methods that could be
used? It may be easier to use straight up Javascript. If so, could you
point me to some methods that would help?

The code is here: http://pastie.caboo.se/112768

I do similar things. If you are including the Prototype library in your
rails app, you can just give all of the divs a common css class name and
select all of them that way using a proxy collection:

<div id="foo1" class="divs_to_change"/>
<div id="foo2" class="divs_to_change"/>
....

then in rjs:

page.select('.divs_to_change').each do |div|
    div.replace_html :partial => 'foo' #or whatever you want to do with
each div.
end

Does that help?

-Bill

chirag wrote:

Btw, the O'reilly book Ajax on Rails is a really good guide to this
stuff with a nice Prototype / Scritaculous reference in it.

-Bill

chirag wrote:

One more thing, these proxies will work with any css selectors, so if
your outer div has an id of outer_div, this will do the same thing:

    page.select('#outer_div div').each do |div|
div.replace_html :partial => 'foo' #or whatever you want to do with each div.
end

-Bill

William Pratt wrote:

Thanks Bill! That helped a lot.

Also, could I set up a loop to parse a YAML file (see example below)
and set up a div for each line in the YAML file?

So, essentially, what would the RJS for the following steps look like:
1. Find the container div
2. Loop through a YAML file and add child divs containing the partial
specified in each line in the YAML file

YAML file
tabs:
  partial: live
  partial: last_half_hour
  partial: last_six_hours
  partial: all_day

Chirag

You can mix plain ruby code into the rjs block, so that should make it
fairly easy to what you want.

-Bill

chirag wrote: