How do I do this with RJS?

Hi,

I have this HTML:

<div id="all_items">
   <div class="item">Item #<span class="itemNo">1</span></div>
   <div class="item">Item #<span class="itemNo">6</span></div>
   <div class="item">Item #<span class="itemNo">8</span></div>
   <div class="item">Item #<span class="itemNo">2</span></div>
</div>

What I want is to write a JS function that I can call that will go
through and replace the text between the SPAN tags with consecutive
numbers. So the final HTML would look like:

<div id="all_items">
   <div class="item">Item #<span class="itemNo">1</span></div>
   <div class="item">Item #<span class="itemNo">2</span></div>
   <div class="item">Item #<span class="itemNo">3</span></div>
   <div class="item">Item #<span class="itemNo">4</span></div>
</div>

I have included this <%= javascript_include_tag :defaults %> in my
<HEAD>. Any ideas how to do the above? - Dave

What I want is to write a JS function that I can call that will go
through and replace the text between the SPAN tags with consecutive
numbers. So the final HTML would look like:

do you mean you want to re-order the span tags that you have or do you
mean you want to go through each one and change the text within each
one?

Phil Tayo wrote:

What I want is to write a JS function that I can call that will go
through and replace the text between the SPAN tags with consecutive
numbers. So the final HTML would look like:

ok i just re-read your post, it seems like you want to replace the text
inside the tags. For this, each tag has to have a unique id, so going
from your example you could have this:

<div id="all_items">
   <div class="item">Item #<span class="itemNo" id = "1">1</span></div>
   <div class="item">Item #<span class="itemNo" id = "2">2</span></div>
   <div class="item">Item #<span class="itemNo" id = "3">3</span></div>
   <div class="item">Item #<span class="itemNo" id = "4">4</span></div>
</div>

then in your RJS you might have:

page<< items =
document.getElementById('all_items').getElementsByClassName('itemNo');"
page<< "for (var i=1;i <= items.length;i++) {"
page<< "items[i].innerHTML = i;"
page<< "}"

that MIGHT work, it probably doesn't but i think you get the idea. you
have to loop through each span class item that you want to change and
change the value...Also I don't profess to be a l33t ruby haxor or
anything so there's almost definitely a better way of doing this.

Hi Phil,

Thanks for your reply. The DIVs of class "item" and the SPANs within
them are getting dynamically inserted and the SPANs don't contain
IDs. I was hoping I could do this without having to assign them one.
I tried your code anyway, but I get the RJS alert error box, "RJS
Error: Type error: items[i] has no properties".

This may be because I didn't have id's in those SPANs.

If there is a way to do it without having to assign IDs to the SPANs,
I am most grateful, - Dave

Hey, You are a real genuis after all. I changed this line

page<< "items[i].innerHTML = i;"

to

page<< "items[i-1].innerHTML = i;"

and everything worked great. Thanks! -

erm ok forget about assigning ids..how about this:

page<< items =
document.getElementById('all_items').getElementsByClassName('itemNo');"
page<< "for (var i=0;i < items.length;i++) {"
page<< "items[i].innerHTML = i+1;"
page<< "}"

* I changed the "for(var i=1; i<=items.length.............)" to
"for(vari=0l i<items.length................)

erm ok forget about assigning ids..how about this:

page<< items =
document
.getElementById('all_items').getElementsByClassName('itemNo');"
page<< "for (var i=0;i < items.length;i++) {"
page<< "items[i].innerHTML = i+1;"
page<< "}"

Just so you know, it's possible to write javascript that is much much
nicer with prototype

$$('#all_items .itemNo').each(function(element,index) {element.
innerHTML = index + 1})

There's really no need to mess around with the dom by hand.

Fred

Just so you know, it's possible to write javascript that is much much
nicer with prototype

$$('#all_items .itemNo').each(function(element,index) {element.
innerHTML = index + 1})

There's really no need to mess around with the dom by hand.

Fred

aha! finally! I knew there'd be a way but I just couldn't find it...this
is a problem i have with ruby: If you don't know what you're looking
for, how do you find it?!

It's not a ruby problem, it's a javascript problem :slight_smile: There is an excellent book on prototype which was an absolute eye-opener for me (http://www.pragprog.com/titles/cppsu)

Fred

It's not a ruby problem, it's a javascript problem :slight_smile: There is an
excellent book on prototype which was an absolute eye-opener for me
(http://www.pragprog.com/titles/cppsu
)

Fred

excellent, I'll check it out.

cheers,

Phil