单个JavaScript用于Rails中的多个记录

Question

I've been trying to wrap my head around this for days now, but I can't seem to find a solution for this problem.

Basically what I want to do is a feed similar to Facebook. A feed with multiple posts, of which each has comments/replies.

Now what I can't get to work is an AJAX "Load more" button for each post. I've only got it working for all posts at once, but not for individual ones.

What I have so far:

The feed:

<% @posts.each do |post| %>
  <%= render "posts/thread", post: post %>
<% end %>

The threads:

<%= render post %>

<% replies = post.replies.paginate(:page => params["replies#{post.id.to_s}"], :per_page => 2) %>

<%= render replies %>

<%= will_paginate replies, :param_name => 'replies'+post.id.to_s %>

<%= link_to "Load More", "#", class: "load-more", id: post.id, :remote => true %>

The posts:

<div class="post" data-id="<%= post.id %>">
  ## content ##
</div>

pagination.coffee:

jQuery ->
  $('.load-more').on 'click', ->
    postId = $(this).attr('id')
    more_posts_url = $('#post-'+postId+' .pagination .next_page').attr('href')
    if more_posts_url
        $('.load-more').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />')
        $.getScript more_posts_url
    return
  return

index.js.erb:

<%= @posts.each do |post| %>
  $('#post-<%= post.id %>').append('<%= j render post.replies %>');
<% end %>

But this does nothing.

I really don't understand how JS works for multiple records on one page.

Answer 1

I suppose this could help: https://jsfiddle.net/se708oou/2/

Main points of difference:

You should loop through all of the .load-more elements

$('.load-more').each(function() {

Change reference to use this

$(this).on('click', function() {

(Miscellaneous) This is how you take data-* in jQuery:

postId = $(this).data('id');

Cheers! :)

Answer 2

Your posts div

<div class="post" data-id="<%= post.id %>">
    ...
</div>

Has a class of post and a data attribute id, but in index.js.erb you are trying to select #post-<%= post.id %>

That selector isn't in the dom, You need to change your selector to

$('.post[data-id=<%= post.id %>').append('<%= j render post.replies %>');