# Toggle single element in a page

**URL:** <https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425>\
**Category:** Rails\
**Created:** [February 16, 2009, 8:29am UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425 "2009-02-16T08:29:25Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![vishy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/v/b487fb/32.png) [@vishy](https://www.ruby-forum.com/u/vishy)\
**Post date:** [February 16, 2009, 8:29am UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425/1 "2009-02-16T08:29:25Z")

</div>

I am currently working on a blog site in which each blog entry will  
have its own comments. The comments can be seen by clicking a comments  
link present at the end of each blog entry. I am using RJS to toggle  
the view of the comments.

#code for the comment link and the comments form

\<%= link\_to\_remote pluralize (blogentry.comments.size, 'Comment'), :url =\> { :action =\> 'show\_comments'}%\>

 #code for comments form

#show\_comments.js.rjs  
page.select("#comments").each do |element}  
element.toggle  
end

Using the above code I am able to toggle the visibility for the  
comments of all the blog entries. However what I want to do is to  
toggle the comments only for the blog entry for which the comments  
link has been clicked.

Any help in this regard with be greatly appreciated.

Thanks,  
vishy

---

<div class="post-metadata">

**Author:** ![vishy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/v/b487fb/32.png) [@vishy](https://www.ruby-forum.com/u/vishy)\
**Post date:** [February 16, 2009, 8:35am UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425/2 "2009-02-16T08:35:17Z")

</div>

On Feb 16, 5:28 am, vishy [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> ```
> #code for comments form
> 
> ```
> 
> link has been clicked.

replace #comments with a selector that identifies only those things  
you want to toggle (and you’re sort of inferring you have multiple  
elements on the page with the id “comments”. That’s not a good thing  
and can produce unexpected results) and have your link to remote pass  
something identifying the entry to operate on (and it looks like you  
could use link\_to\_function rather than link\_to\_remote and save  
yourself a server round trip)

Fred

---

<div class="post-metadata">

**Author:** ![vishy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/v/b487fb/32.png) [@vishy](https://www.ruby-forum.com/u/vishy)\
**Post date:** [February 16, 2009, 7:34pm UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425/3 "2009-02-16T19:34:04Z")

</div>

You need a richer set of IDs and divs on your page so you can  
precisely identify what you want to affect. E.g.

posty post post post

first comment on post X

second comment on post X

third\_comment on post X
 .... 

posty post post post

first comment on post Y

second comment on post Y

third\_comment on post Y
 .... 

where X, a, b, c, Y, d, e, f, and so on are numbers (probably best as  
the ID of the corresponding DB records). Associate your formatting CSS  
with the classes, and use the IDs to control / affect individual  
elements.

-Chris W

---

<div class="post-metadata">

**Author:** ![vishy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/v/b487fb/32.png) [@vishy](https://www.ruby-forum.com/u/vishy)\
**Post date:** [February 17, 2009, 1:52pm UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425/4 "2009-02-17T13:52:51Z")

</div>

Chris,

As suggested above I have a separate ids for each of my comment divs.  
The code for the comments div now looks something like this:

" \> \<%= render :partial =\> blogentry.comments %\> \<% form\_for [blogentry, Comment.new] do |f| %\> 

\<%= f.label :body, "New Comment" %\>  
 \<%= f.text\_area :body %\>

\<%= f.submit "Add Comment"%\>

 \<% end %\> 

and again the code for the link for firing the javascript on click is:

\<%= link\_to\_remote pluralize(blogentry.comments.size, ‘Comment’), :url  
=\> { :action =\> ‘show\_comments’} %\>

Now the point where I am stuck is to pass the blogentry object to the  
rjs file so that I can use it to get the id from it and use that to  
toggle the view for the element. I was thinking about using something  
like  
page[:Comment\_ box\_\<%=blogentry.id=\>].toggle but rails gives me a  
compiler error there.

Is there a way to pass the object to the rjs and use it get the ids  
for each div or any other way that I can do this.

I did go through some other posting and found that I can pass the  
object to link using something like:  
\<%= link\_to\_remote pluralize(blogentry.comments.size, ‘Comment’), :url  
=\> { :action =\> ‘show\_comments’}, :entry =\> blogentry %\>

and use the entry object but it still doesn’t work.

Thanks,  
Vishy

---

<div class="post-metadata">

**Author:** ![vishy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/v/b487fb/32.png) [@vishy](https://www.ruby-forum.com/u/vishy)\
**Post date:** [February 17, 2009, 2:10pm UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425/5 "2009-02-17T14:10:32Z")

</div>

On Feb 17, 12:51 pm, vishy [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid) wrote:

> Now the point where I am stuck is to pass the blogentry object to the  
> rjs file so that I can use it to get the id from it and use that to  
> toggle the view for the element. I was thinking about using something  
> like  
> page[:Comment\_ box\_\<%=blogentry.id=\>].toggle but rails gives me a  
> compiler error there.

rjs files are not erb templates. page[“bla\_blah#{blogentry.id}”]  
should do the trick

> Is there a way to pass the object to the rjs and use it get the ids  
> for each div or any other way that I can do this.
> 
> I did go through some other posting and found that I can pass the  
> object to link using something like:  
> \<%= link\_to\_remote pluralize(blogentry.comments.size, ‘Comment’), :url  
> =\> { :action =\> ‘show\_comments’}, :entry =\> blogentry %\>

you can pass anything in the :url hash that you would pass in a call  
to link\_to, url\_for etc… eg {:action =\> ‘show\_comments’, :id =\>  
1234}  
Equally you can use a named route ie :url =\> blog\_entry\_comments\_path  
(blogentry) (assuming you had the relevant routes declared

Fred

---

<div class="post-metadata">

**Author:** ![vishy](https://www.ruby-forum.com/letter_avatar_proxy/v4/letter/v/b487fb/32.png) [@vishy](https://www.ruby-forum.com/u/vishy)\
**Post date:** [February 19, 2009, 7:01am UTC](https://www.ruby-forum.com/t/toggle-single-element-in-a-page/160425/6 "2009-02-19T07:01:46Z")

</div>

###page[“bla\_blah#{blogentry.id}”]

This did the trick for me. Thanks a lot for that tip Fred.  
Here is what I did finally to get it to work:  
The code for the Comments Link:  
\<%= link\_to\_remote pluralize(blogentry.comments.size, ‘Comment’), :url  
=\> { :action =\> ‘show\_comments’, :entry =\> blogentry}%\>

and then in my rjs:  
entry = params[:entry]  
page[“Comment\_box\_#{entry}”].toggle

Thanks everyone for the help.

Cheers,  
vishy

On Feb 17, 7:09 am, Frederick C. [removed\_email\_address@domain.invalid](mailto:removed_email_address@domain.invalid)