each do js problem

rubyonrails-talk
1

I have a bit of code which displays subcomments nicely and a bit of js to hide them:

<div>   <input type="button", value="Subcomments", onclick="changeClass('subcomNormal')">    <div id = "subcomNormal" >       <% comment.subcomments.each do |subcomment| %>          <div id="subremark" >            <p><%= subcomment.body %></p>          <div id="commenter" >           <p><%= subcomment.created_at %><%= subcomment.user_id %></p>          </div>          </div>      <% end %>    </div>    </div>

This is the js

<script language="javascript" type="text/javascript"> function changeClass(subcomNormal) {        if(document.getElementById(subcomNormal).className =='subcomHide')           {document.getElementById(subcomNormal).className = 'subcomNormal'; }        else           { document.getElementById(subcomNormal).className = 'subcomHide'; } } </script>

The subcomments on the first comments subcomments hide nicely but the subcomments button on the second and subsequent comments only bring back the subcomments on the first comment and has no effect on it's own subcomments.

Can anybody see where I am going wrong?

2

"The subcomments on the first comments subcomments" .... "the subcomments on the first comment and has no effect on it's own subcomments"

lol :slight_smile:

In jquery there is nice method toggle.

.toggle( showOrHide ) showOrHideA Boolean indicating whether to show or hide the elements. With no parameters, the .toggle() method simply toggles the visibility of elements:

$('.target').toggle();

http://api.jquery.com/toggle/

use it, it will simplify you code and maybe you'll find out solution on your own.

3

I have a bit of code which displays subcomments nicely and a bit of js to hide them:

<div> <input type="button", value="Subcomments", onclick="changeClass('subcomNormal')"> <div id = "subcomNormal" > <% comment.subcomments.each do |subcomment| %> <div id="subremark" > <p><%= subcomment.body %></p> <div id="commenter" > <p><%= subcomment.created_at %><%= subcomment.user_id %></p> </div> </div> <% end %> </div> </div>

Is this repeated for each comment? have multiple things on the page with the same id is a no-no: ids should be unique

Fred

4

Eugen Ciur wrote in post #997765:

.toggle() | jQuery API Documentation

use it, it will simplify you code and maybe you'll find out solution on your own.

Never used jquery before, I see it's simplicity compared to straight js

I now have

<% @user.comments.each do |comment| %>    <div id="remark" ><p><%= comment.body %></p>      <div id="commenter"><p><%= comment.story_id %> <%= comment.id %>      </div>    </div>    <button>Hide</button>    <div id = "subcomNormal" >       <% comment.subcomments.each do |subcomment| %>          <div id="subremark" >            <p><%= subcomment.body %></p>          <div id="commenter" >           <p><%= subcomment.created_at %><%= subcomment.user_id %></p>          </div>          </div>      <% end %>    </div> <% end %>

with

<script> $("button").click(function () { $("#subcomNormal").toggle(); }); </script>

It still gives the same problem i.e all Hide buttons affect the first comments subcomments

5

Frederick Cheung wrote in post #997768:

Is this repeated for each comment? have multiple things on the page with the same id is a no-no: ids should be unique

Fred

This is the full code

<% @user.comments.each do |comment| %>    <div id="remark" ><p><%= comment.body %></p>      <div id="commenter"><p><%= comment.story_id %> <%= comment.id %>      </div>    </div>    <button>Hide</button>    <div id = "subcomNormal" >       <% comment.subcomments.each do |subcomment| %>          <div id="subremark" >            <p><%= subcomment.body %></p>          <div id="commenter" >           <p><%= subcomment.created_at %><%= subcomment.user_id %></p>          </div>          </div>      <% end %>    </div> <% end %>

Yes it is repeated for all comments. Both comments and subcomments have individual id's I don't see you point.

6

Frederick Cheung wrote in post #997768:

Is this repeated for each comment? have multiple things on the page with the same id is a no-no: ids should be unique

Fred

This is the full code

<% @user.comments.each do |comment| %>

<%= comment.body %>

<%= comment.story_id %> <%= comment.id %>

Hide
<% comment.subcomments.each do |subcomment| %>

<%= subcomment.body %>

<%= subcomment.created_at %><%= subcomment.user_id %>

<% end %>
<% end %>

Yes it is repeated for all comments. Both comments and subcomments have individual id’s I don’t see you point.

Well for example you have multiple divs with id subcomNormal, and your onclick does getElementById(‘subcomNormal’), which can’t know that you want (for example) the third item on the page with that id

Fred

7

To check whether your html is valid, view the page in the browser and view the html using View >> Page Source (or similar). Then copy the complete text and paste it into the w3c html validator.

Colin

8

Quoting Colin Law <clanlaw@googlemail.com>:

> Frederick Cheung wrote in post #997768: > >> Is this repeated for each comment? have multiple things on the page >> with the same id is a no-no: ids should be unique >> >> Fred > > > This is the full code > > <% @user.comments.each do |comment| %> > <div id="remark" ><p><%= comment.body %></p> > <div id="commenter"><p><%= comment.story_id %> <%= comment.id %> > </div> > </div> > <button>Hide</button> > <div id = "subcomNormal" > > <% comment.subcomments.each do |subcomment| %> > <div id="subremark" > > <p><%= subcomment.body %></p> > <div id="commenter" > > <p><%= subcomment.created_at %><%= subcomment.user_id %></p> > </div> > </div> > <% end %> > </div> > <% end %> > > Yes it is repeated for all comments. Both comments and subcomments have > individual id's I don't see you point.

They don't have different ids. Every remark has the ID, 'remark'. Maybe you intended something like:

<div id="<%= dom_id(comment) %>">

or simply:

<div id="<%= "remark_#{comment[:id]}" %>">

HTH,   Jeffrey

9

Jeffrey L. Taylor wrote in post #997862: <div id="<%= "remark_#{comment[:id]}" %>">

HTH,   Jeffrey

Thanks that did the trick but I applied it to <div id="subcomNormal">

Neil

10

Neil Bye wrote in post #998024:

Jeffrey L. Taylor wrote in post #997862: <div id="<%= "remark_#{comment[:id]}" %>">

I rebuilt the app in Rail 3 and the above no longer works. Has anybody an idea why? Or What can I use instead?

11

Neil Bye wrote in post #998024:

> Jeffrey L. Taylor wrote in post #997862: > <div id="<%= "remark_#{comment[:id]}" %>">

I rebuilt the app in Rail 3 and the above no longer works. Has anybody an idea why? Or What can I use instead?

How has the output changed?

Fred

12

Frederick Cheung wrote in post #1014673:

13

Sorry the attachment is now correct, Id missed out the _#{comment[:id]}

Neil

Attachments: http://www.ruby-forum.com/attachment/6495/_subcomment.html.erb

14

Sorry the attachment is now correct, Id missed out the _#{comment[:id]}

it's not in a <%= tag anymore

Fred

15

Sorry still stuck. If you look at the attached _subcomment.html.erb you will see that I have put the jQuery inside the each loop and it obviously causes problems because the jQuery is repeated. It's inside because I get an error on the comment variable otherwise.

Any ideas

Neil

Attachments: http://www.ruby-forum.com/attachment/6505/_subcomment.html.erb