弹出窗口中仅显示最后一篇文章的评论(Ruby on Rails) [英] only the comments of the last post are displayed in popup (Ruby on Rails)

查看:91
本文介绍了弹出窗口中仅显示最后一篇文章的评论(Ruby on Rails)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在每个帖子下都有评论.可以通过链接/users/username

I have comments under each post. All of the posts and the comments can be seen through link /users/username

我在弹出窗口中使用了facebox(基于jQuery的灯箱),并且注释显示得很好.唯一的问题是,弹出窗口中仅显示最新帖子的评论.将为所有弹出链接显示相同注释.

I'm using facebox (jQuery-based lightbox) for the popups and the comments are displaying just fine. The only problem is that only the comments of the LATEST post are shown in the popups. The same comments are displayed for all of the popup links.

例如,如果最新帖子有5条评论,我可以单击该帖子下方的评论链接以在弹出窗口中查看.但是,当我向下滚动并转到带有1条评论的另一篇文章时,单击评论链接时会看到相同的5条评论.如何确保仅显示与特定帖子相关的评论?

For example, if the latest post has 5 comments, I can click the comments link below the post to view that in a popup. However, when I scroll down and go to another post with 1 comment, I see the same 5 comments when I click the comment link. How can I make sure that only the comments associated to a particular post is displayed?

这是我的show.html.erb

Here's my show.html.erb

<script src="/jquery.js" type="text/javascript"></script>
<link href="/src/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/src/facebox.js" type="text/javascript"></script> 
<script language="javascript">

 jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox() 
}) 
</script>

<% provide(:title, @user.name) %>
<div class="row">
  <aside class="span4">
    <section>
      <h1>
        <%= gravatar_for @user %>
        <%= @user.name %>
      </h1>
    </section>
    <section>
      <%= render 'shared/stats' %>
     </section>
  <br>
  </aside>
 <br>

  <div class="span10">
    <%= render 'follow_form' if signed_in? %>
    <% if @user.microposts.any? %>
      <h3>Browse</h3>
      <ol class="microposts">
        <%= render @microposts %>
      </ol>
      <%= will_paginate @microposts %>
    <% end %>
  </div>
  </div>

我的micropost.html.erb,评论视图位于底部

My micropost.html.erb where the comment view is at the bottom

<li>

 <%= render 'shared/comment_form', micropost: micropost if signed_in?%>
 <div id ="modal" class = "comments">
  <% micropost.comments.each do |comment| %>
  <%= image_tag("http://www.gravatar.com/avatar.php?gravatar_id=#{Digest::MD5::hexdigest(comment.user.email)}", :alt => 'Avatar', :class => 'avatar', :height => "10%", :width => "10%") %> <!-- Retrieves 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 %></div>
</li>

然后最后是comment_form.html.erb

Then finally the comment_form.html.erb

<%= form_for([micropost, @comment]) do |f| %>
<%= render 'shared/error_messages', object: f.object %>
  <div class="field">
    <%= f.text_field :comment_content %>
  </div>
  <div class="ItemContainer">
<div class="ItemInput">
    <button class="btn" type="submit">
    Comment
  </button>
  </div><div class="ItemCommentCount">
<% end %>

<%= link_to "#modal", :rel => "facebox-#{micropost.id}" do %>
  Comments
<% end %></div></div> 

推荐答案

来自

id = ID

元素的唯一标识符.

文档中不得有多个具有相同ID值的元素.

There must not be multiple elements in a document that have the same id value.

您有多个<div id="modal">元素:

<div id ="modal" class = "comments">

在您的页面中.由于id应该是唯一的,因此对id的DOM搜索通常只会找到第一个.您总是会收到第一个微博的评论,并且与重复的id s相匹配.

in your page. Since ids are supposed to be unique, a DOM search for an id will usually only find the first one; you're always getting the comments for the first micropost and that matches the expected behavior when you have duplicate ids.

一个简单的解决方案是将micropost.id包含在DOM id s中:

An easy solution would be to include the micropost.id in the DOM ids:

<div id="modal-<%= micropost.id %>" class="comments">

,然后在链接中:

<%= link_to "#modal-#{micropost.id}", :rel => "facebox-#{micropost.id}" do %>
  Comments
<% end %>

这篇关于弹出窗口中仅显示最后一篇文章的评论(Ruby on Rails)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆