_participation.html.erb

<div class="participations" data-no-turbolink>
  <h2><%= participation.user.name %></h2>
</div>

index.html.erb

<div class="container">
  <div class="row">
    <div id="participations">
        <%= render @participations %>
    </div>
    <%= will_paginate @participations %>
  </div>
</div>

index.js.erb

$('#participations').append('<%= j render(@participations) %>');
<% if @participations.next_page %>
$('.pagination').replaceWith('<%= j will_paginate(@participations) %>');
<% else %>
$('.pagination').remove();
<% end %>

pagination.js.coffee

$(window).scroll -> 
  #Return right away if we're busy loading next set 
  return if(window.pagination_loading)
  url = $('.pagination .next_page').attr('href')
  console.log "url is undefined: url #{url}"
  if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
    #Note that we're loading data set
    window.pagination_loading = true 
    
    #load as before but attach callback to clear falg when we're done. 
    $('.pagination').text('Fetching more products...')
    $.getScript(url).always -> 
      window.pagination_loading = false