Toggle single element in a page


#1

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


#2

On Feb 16, 5:28 am, vishy 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


#3

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


#4

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


#5

On Feb 17, 12:51 pm, vishy 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


#6

###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