如何使用Modals显示不同的帖子

时间:2016-08-12 18:45:05

标签: ruby-on-rails ruby twitter-bootstrap bootstrap-modal

我是RoR的新手,我最近遇到了一个问题,因为我试图以不同的模态显示不同的帖子。为了上下文化,我有一个主页,每个帖子都会显示。每个帖子都包含作者,内容,类似按钮和评论按钮。我希望评论按钮打开一个模式,再次包含作者的姓名,内容和评论帖子的区域。问题是我点击的每个模态包含相同的作者和相同的内容,即使我点击的评论按钮来自不同的帖子。确切地说,模态中显示的内容来自最近发布的帖子。告诉我你是否需要特别的东西,我很乐意用你要问我的代码编辑这篇文章。

显示帖子:

<% @posts.each do |post| %>         
  <div class="media">
    <a class="media-left" href="#">
      <div class='circle-icon'>
        <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
      </div>
    </a>
    <div class="media-body">
      <h2 class="media-heading"><%= post.user.first_name %> <%= post.user.last_name %></h2>
      <h4><%= post.content %> </h4>
      <br>Submitted <%= time_ago_in_words (post.created_at) %> ago<br>
      <%= button_to like_post_path(post), method: :put do %>Like<%= post.get_upvotes.size %>
<% end %>
<a  href="#" data-toggle="modal" data-target="#myModal" class="btn btn-xs btn-primary"><span class="glyphicon glyphicon-comment"></span> Comment</a>

这是我的模态:

<!-- Modal -->

<div class="modal fade .local-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"><%= post.user.first_name %>     <%= post.user.last_name %></h4>
      </div>
      <div class="modal-body">
        <p><%= post.content %> </p>
        <hr>
        <fieldset class="form-group">
          <label for="exampleTextarea">Write your comment:</label>
          <textarea class="form-control" id="exampleTextarea" rows="3">   </textarea>
        </fieldset>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" >Like</button>
        <button type="button" class="btn btn-primary" data-dismiss="modal">Comment</button>
      </div>
    </div>
  </div>
 </div>

这是我的JS脚本:

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover(); 
    $('[data-toggle="popover"]').popover({ html : true});
});

$('#popover').popover({ 
    html : true,
    title: function() {
      return $("#popover-head").html();
    },
    content: function() {
      return $("#popover-content").html();
    }
});

</script>

0 个答案:

没有答案