Rails：在filterrific之后加载Jquery Infinite Pages

Question

I'm using Rails, jquery infinite pages , kaminari, and filterrific to allow users to filter and infinite scroll through a list of movie trailers.

The infinite scroll works by waiting until the user scrolls within X pixels of the pagination div, then it adds the next X trailers to a parent div using AJAX.

<div class="pagination">
  <a rel="next" data-remote="true" href="link-to-next-page"></a>
</div>

The infinite scroll is working perfect when the page first loads. BUT if the user filters first, then the infinite scroll no longer works. Here's the JS that is getting called when a user filters:

<% js = escape_javascript(
  render 'trailers/list', trailers: @trailers
) %>

$("#filterrific_results").html("<%= js %>");
$(".infinite-table").append('<div class="pagination"><%=j link_to_next_page(@trailers, '', :remote => true) %></div>')

and the html...

<div class="infinite-table">

  <div class="trailers text-center" id="filterrific_results">
    <div class="trailers-container">
      <%= render 'trailers/list', trailers: trailers %>
    </div>
    <div class="pagination">
      <%= link_to_next_page(trailers, '', :remote => true) %>
    </div>
  </div>

  <div class="clearfix"></div>


</div>

trailers/_list.html.erb:

<% trailers.each_with_index do |trailer, index| %>
  <%= render "/trailers/trailer", trailer:trailer, index: index %>
<% end %>

After the user filters, I can see the first set of filtered trailers are loading into the trailers-container as expected. I can also see that the $(".pagination") is present.

But for some reason, when I scroll to the bottom of the page... the infinite scroll is not working.

My gut tells me it has something to do with the way I've loaded the pagination div dynamically, maybe it's not properly binded and therefore has no event listener on it?

Any ideas?

Answer 1

From our understanding working on a very similar issue, your assessment of the element binding is correct. When filterrific_results is loaded, the elements are completed rewritten and in this context, the binding is not known (it was done most likely only at page load). We fixed this (in a somewhat inelegant manner) by rebinding when index.js.erb updates the div as below (note that 'toggle' is our problem equivalent of infinite-table):

<% js = escape_javascript( render(partial: 'enrollments/list', locals: { enrollments: @enrollments }) ) %>
$("#filterrific_results").html("<%= js %>");
console.log('after filterrific trigger');
$('.toggle')
    .bind('change', toggle_change)
    .bind('blur', toggle_blur);

Addenda: note that toggle_change & toggle_blur functions MUST be in global scope. We modified our coffee script accordingly such that these methods would be available.