Help with RJS to loop through divs and change hyperlinks

rubyonrails-talk
1

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>

2

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: Parked at Loopia

3

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:

4

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:

5

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:

6

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

7

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

-Bill

chirag wrote: