How to display different posts using Modals

问题

I'm new to RoR and I've encountered a problem recently as I am trying to display different posts in different modals. To contextualize I have a Home page on which is displayed every post. Every post contains an author, a content, a like button and a comment button. I want the comment button to open a modal containing again the author's name, the content and an area to comment the post. The problem is that every modal that I click on contains the same author and the same content even if the comment button I clicked on is from a different post. To be precise the content displayed in the Modal is from the most recently posted post. Tell me if you need something in particular and I will be happy to edit this post with the code you'll ask me.

Displaying the posts:

<% @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>

And here is my Modal:

<!-- 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>

Here is my JS Script:

<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>

来源：https://stackoverflow.com/questions/38924578/how-to-display-different-posts-using-modals

标签

ruby-on-rails

ruby

twitter-bootstrap

bootstrap-modal