Information Technology Dark Side

I created a form with a hidden field called ‘page’ in my div where I want infinite scrolling to happen. Then I set up my controller action for the action in the normal way with pagination by kaminari:

def campaign
  @testimonials = Testimonial.page(params[:page])

  respond_to do |format|
    format.js
    format.html    
  end
end

In campaign.js.erb I simply append the new results to the bottom of the div.

The last bit is to write some coffeescript that increments the page field and submits the form when you scroll to the bottom of the div:

loading = false

$('.testimonials').scroll -> 
    
  if $(@).scrollTop() + $(@).innerHeight() >= $(@)[0].scrollHeight
    unless loading == true
      loading = true
      page = parseInt($(@).find('#page').val())
      page++
        
      $(@).find('#page').val(page)
      $(@).find('form').submit()
      loading = false

Oh, yeah, the page field needs to start out with a value of 1.

Bam. Easy infinite scrolling in a div.

Stumble it!