Endless scrolling gives a pattern error when scrolling down to the next page

Question

I did pagination using will_paginate gem, now I want to scroll endlessly using this gem, and I followed the rails and this https://stackoverflow.com/a/168262/ and all the codes regarding this have been written. The problem is that the data is going well, but it repeats many times on the page when I scroll it down. I do not know why this is so. Any help would be noticeable.

My controller code:

def locations
    merchants = Merchant.where("role = ?", 'Merchant')
    @merchants_data = merchants.paginate(:page => params[:page], :per_page => 20)
    respond_to do |format|
      format.html
      format.js
    end
  end

_location.html.erb:

<table>
  <tr>
    <th>
      Name
    </th>
  </tr>
  <% @merchants_data.each do |x| %>
  <tr>
    <td>
      <%= x.name %>
    </td>
  </tr>
  <% end %>
</table>

<%= will_paginate @merchants_data %>

home.js.coffee:

jQuery ->
if $('.pagination').length 
  $(window).scroll ->
    url = $('.pagination .next_page').attr('href')
    if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
      $('.pagination').text('Fetching more locations...')
      $.getScript(url)
  $(window).scroll()

location.js.erb:

$('#locations').append('<%= j render partial: "locations", collection:@merchants_data %>');
<% if @merchants_data.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@merchants_data) %>');
<% else %>
  $('.pagination').remove();
<% end %>

Answer 1

location.js.erb render @merchants_data, , _merchant.html.erb, Merchant . , , , . " ".

, , - ( ).

. html id="locations", - .