Help with RJS to loop through divs and change hyperlinks

Rails
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);”) %>


<%=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>

<%=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);”) %>


<%=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);”) %>


<%=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);”) %>

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:

....

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

4

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

5

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

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