Forum: Ruby on Rails Toggle single element in a page

Announcement (2017-05-07): www.ruby-forum.com is now read-only since I unfortunately do not have the time to support and maintain the forum any more. Please see rubyonrails.org/community and ruby-lang.org/en/community for other Rails- und Ruby-related community platforms.
4ee5ca38cb149788ca612902d857212e?d=identicon&s=25 vishy (Guest)
on 2009-02-16 08:29
(Received via mailing list)
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
<div id="blog_comments"><%= link_to_remote pluralize
(blogentry.comments.size, 'Comment'), :url => { :action =>
'show_comments'}%></div>
<div id="comments">
    #code for comments form
</div>

#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
81b61875e41eaa58887543635d556fca?d=identicon&s=25 Frederick Cheung (Guest)
on 2009-02-16 08:35
(Received via mailing list)
On Feb 16, 5:28 am, vishy <shubhambansa...@gmail.com> 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
D74cc7f3b588c1933e5417b99bb1ed59?d=identicon&s=25 Chris Warren (Guest)
on 2009-02-16 19:34
(Received via mailing list)
You need a richer set of IDs and divs on your page so you can
precisely identify what you want to affect. E.g.

<div id="all_posts_and_comments">
<div id="post_X_and_comments" class="post_and_comments_group">
  <div id="post_X" class="general_post">posty post post post</div>
  <div id="post_X_comments" class="comment_group">
    <div id="post_X_comment_a" class="general_comment">first comment
on post X</div>
    <div id="post_X_comment_b" class="general_comment">second comment
on post X</div>
    <div id="post_X_comment_c" class="general_comment">third_comment
on post X</div>
      ....
  </div>
</div>
<div id="post_Y_and_comments" class="post_and_comments_group">
  <div id="post_Y" class="general_post">posty post post post</div>
  <div id="post_Y_comments" class="comment_group">
    <div id="post_Y_comment_d" class="general_comment">first comment
on post Y</div>
    <div id="post_Y_comment_e" class="general_comment">second comment
on post Y</div>
    <div id="post_Y_comment_f" class="general_comment">third_comment
on post Y</div>
      ....
  </div>
</div>
</div>

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
4ee5ca38cb149788ca612902d857212e?d=identicon&s=25 vishy (Guest)
on 2009-02-17 13:52
(Received via mailing list)
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:

  <div class="comments" id = "Comment_box_<%=blogentry.id%>" >
    <%= render :partial => blogentry.comments %>
    <% form_for [blogentry, Comment.new] do |f| %>
    <p>
      <%= f.label :body, "New Comment" %><br />
      <%= f.text_area :body %>
    </p>
    <p><%= f.submit "Add Comment"%></p>
    <% end %>
  </div>


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
81b61875e41eaa58887543635d556fca?d=identicon&s=25 Frederick Cheung (Guest)
on 2009-02-17 14:10
(Received via mailing list)
On Feb 17, 12:51 pm, vishy <shubhambansa...@gmail.com> 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
4ee5ca38cb149788ca612902d857212e?d=identicon&s=25 vishy (Guest)
on 2009-02-19 07:01
(Received via mailing list)
###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 Cheung <frederick.che...@gmail.com>
This topic is locked and can not be replied to.