# Help with RJS to loop through divs and change hyperlinks

**URL:** <https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812>\
**Category:** Rails\
**Created:** [October 31, 2007, 8:33am UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812 "2007-10-31T08:33:42Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [October 31, 2007, 8:33am UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/1 "2007-10-31T08:33:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [October 31, 2007, 7:06pm UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/2 "2007-10-31T19:06:36Z")

</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: [Parked at Loopia](http://pastie.caboo.se/112768)

---

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [November 1, 2007, 5:08am UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/3 "2007-11-01T05:08:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [November 1, 2007, 5:20am UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/4 "2007-11-01T05:20:29Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [November 1, 2007, 5:09am UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/5 "2007-11-01T05:09:22Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [November 1, 2007, 8:22pm UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/6 "2007-11-01T20:22:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![chirag](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/c/ecccb3/32.png) [@chirag](https://www.ruby-forum.com/u/chirag)\
**Post date:** [November 1, 2007, 11:18pm UTC](https://www.ruby-forum.com/t/help-with-rjs-to-loop-through-divs-and-change-hyperlinks/118812/7 "2007-11-01T23:18:56Z")

</div>

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

-Bill