Search code examples
rubyruby-on-rails-3htmlfacebox

my final step in the rails app, how to make comments appear in a popup?


This is the last remaining item to complete my first rails app and need some help. On each user profile (localhost:3000/users/username), there's a listing of posts that the user has made. Associated with each post are comments. So post_id: 3 could have comments.

I have it working already in view form but I need the comments to appear in a popup instead when the "Comments" link under each post is clicked. I have already applied facebox which is a jQuery-based lightbox that displays popups.

I just need to move what's currently shown in show.html.erb into a popup.

There's the _comment_form.html.erb which renders into _post.html.erb

  <%= link_to #, :rel => "facebox-#{post.id}" do %>
  +<%= post.comments.count.to_s %>
<% end %>
 <div class ="ItemComments"><% if post.comments.exists? %>
   <% post.comments.each do |comment| %>
   <%= image_tag("http://www.gravatar.com/avatar.php?gravatar_id=#{Digest::MD5::hexdigest(comment.user.email)}" %>
   <span class="users"><%= link_to comment.user.name, comment.user %></span>
   <span class="timestamp"><%= time_ago_in_words(comment.created_at) %> ago</span>
   <span class="content2"><%= comment.comment_content %></span>
   <% end %>
 <% end %></div>

The above renders into _post.html.erb using:

<%= render 'shared/comment_form', post: post if signed_in?%>

Then it renders into show.html.erb

I'm trying to use this line, but what do I link it to?

    <%= link_to #, :rel => "facebox-#{post.id}" do %>
  +<%= post.comments.count.to_s %>
<% end %>

This is shared/_comment.html.erb

<% if post.comments.exists? %>
  <% post.comments.each do |comment| %>
  <%= image_tag("http://www.gravatar.com/avatar.php?gravatar") %>
    <%= link_to comment.user.name, comment.user %>
            <span class="timestamp"><%= time_ago_in_words(comment.created_at) %> ago</span>
    <span class="content2"><%= comment.comment_content %></span>
    <% end %>
<% end %>

Solution

  • One way of doing this is to render your comments into a hidden div and give that div an id. Next you point your link to the id of the div using # followed by the id. It would look something like this:

    _post.html.erb

    <%= link_to "#comments", :rel => "facebox" do %>
        <%= post.comments.count.to_s %>
    <% end %>
    <div id="comments">
        <%= render 'shared/comment_form', post: post if signed_in?%>
    </div>
    

    CSS

    #comments {
        display: none;
    }
    

    See the 'Divs' heading over at the Facebox docs.