Question

I’m implementing show/hide feature for users comments.

Discussed here: https://stackoverflow.com/a/10174194/439688

My aim was to:
1. Limit the default shown comments to 2.
2. Have a span with text that states the number of total comments for that particular micropost and when clicked by a user have it expand and show all comments for that micropost. I would be using Jquery/Ajax to hide, show, prepend etc.

The first change was to limit the amount of comments shown to the user and I achieved this by creating a method in my helper called “comments” and here I pass in the id of the micropost the comment belongs to.

  def get_comments(micropost_id)
       Comment.limit(2).order("created_at DESC").where(:micropost_id => micropost_id)
  end

Now the each loop that loops through each comment will only show the 2 most recent comments.

  <<% @microposts.each do |m| %>
    <% if m.poster_id.nil? %>
       <div class="postHolder">
        <nav class="micropostOptions">
         <ul class="postMenu">
           <li class="deletePost"><%= link_to content_tag(:span, "Delete post"), m, :method => :delete, :confirm => "Are you sure?", :title => m.content, :class => "message_delete", :remote => true %>
           </li>
           <li class="disableCommenting"><%= link_to content_tag(:span, "Pause commenting"), "2" %></li>
           <li class="blockCommenter"><%= link_to content_tag(:span, "Block commenter"), "3" %></li>
           <li class="openInNewWindow"><%= link_to content_tag(:span, "Open in new window"), "4" %></li>
           <li class="reportAbuse"><%= link_to content_tag(:span, "Report abuse"), "5" %></li>
         </ul>  
       </nav>


                <%= link_to image_tag(default_photo_for_current_user, :class => "poster_photo"), current_users_username %>

<div class="post_content">
    <div class="post_container">

        <div class="mainUserNameFontStyle"><%= link_to current_users_username.capitalize, current_users_username %> - <div class="post_time"> <%= time_ago_in_words(m.created_at) %> ago.</div> 
        </div>  
                  <%=  simple_format h(m.content) %> </div>
            <div class="commentsCount">
                <%= content_tag :span, pluralize(m.comments.count, 'comment'), :class => "view_all_comments" if m.comments.any? %>
            </div>
                        <% if m.comments.any? %>

                   <% comments(m.id).each do |comment| %>

                    <div class="comment_container">

                        <%= link_to image_tag(default_photo_for_commenter(comment), :class => "commenter_photo"), commenter(comment.user_id).username %>

                        <div class="commenter_content"> <div class="userNameFontStyle"><%= link_to commenter(comment.user_id).username.capitalize, commenter(comment.user_id).username %> - <%=  simple_format h(comment.content) %> </div>
                    </div><div class="comment_post_time"> <%= time_ago_in_words(comment.created_at) %> ago. </div>


                   </div>


                        <% end %>
                    <% end %>


                <% if logged_in? %>
                <%= form_for @comment, :remote => true do |f| %>
                <%= f.hidden_field :user_id, :value => current_user.id %>
                <%= f.hidden_field :micropost_id, :value => m.id %>
                <%= f.text_area :content, :placeholder => 'Post a comment...', :class => "comment_box", :rows => 0, :columns => 0 %>

        <div class="commentButtons">         
          <%= f.submit 'Post it', :class => "commentButton", :disable_with => "Post it" %>
           <div class="cancelButton"> Cancel </div>
        </div>   
                <% end %>

                <% end %>
    </div>


</div>

From here this is where it gets confusing for me. I got slightly further using link_to but then decided I’d prefer not to have the url to the comments count show in the browser status bar. This is why I switched to using span.. but now it’s not quite easy to do what I wish to do as I can’t use the link_to/remote => true now.

How do I make it so when a user clicks the comment count span an ajax call is made pointing to:

  def load_comments

  @load_comments = Comment.where(:micropost_id => params[:id])   
    respond_to do |format|
    format.js   { render :load_comments } 
    end

  end

I thought about putting a click function in users.js but how would I pass the params of the micropost that is in the each loop in the code above into users.js? I don’t think it’s possible.

All my comment posting is done via ajax but because I used forms for these it was so much easier for me to just add remote => true and create some js templates and do something on success of ajax post.

Not sure if I’m even going about this the right way. I’d appreciate some help/advice from more experienced rails programmers.

Kind regards

Answer 1

Rails partial

#Display all the comments based on local passed to this partial

# Initially pass limit as 2(or whatever you want). then on click of span pass limit as nil. then you can check if limit is nil you can query the model without limit specifier.

<% @comments = Comment.custom_find(@your_params) %>
<% @comments.each do |comment|  %>
<%= comment.title %>
<% end %>

javascript/jquery

function load_all_comments(id)
{
   new Ajax.Updater('show_comments',
      '<%=url_for(:controller => "your_controller", :action => "your_action")%>', {
       parameters: {'id':id },
       method:     'get',
       onSuccess: function(request){
       div_comments = document.getElementById("partial_comments_list");
       div_comments.innerHTML = request.responseText;

      }
   });
} // you can call this js function on span click. use jquery if you want. 

Controller:

Then inside your_action of your_controller, dont forget to render the partial

   render :partial => "show_comments", :layout => false

Edit:

you can even pass locals to your partial

 render :partial => "show_comments", :locals => {:post => @post}

Using this every time your partial view will get updated, on the basis of locals you pass.

of course this is just an example not a complete code/solution.

There may be better ways. but this worked fine for me.