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 (Pragmatic Bookshelf: By Developers, For Developers)

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 (Pragmatic Bookshelf: By Developers, For Developers )

Fred

excellent, I'll check it out.

cheers,

Phil