0

In my app I allow users to like item/cover object which they can later view in their profile.

I have a profile model that shows a list of items and covers in separate tabs. A user clicks on a link to selects which list to view, which sends the object name to params[:filter] and reloads the page with the correct list.

I am now trying to create infinite scroll for both lists with Kaminari and ajax. It works fine for each list seperatly but when i try to use an if statement with params (in profiles/show.js.haml) the loading breaks. any thoughts?

profiles_controller.rb 

class ProfilesController < ApplicationController
  def show  
    @covers = @user.get_voted(Cover).page(params[:page]) 
    @items = @user.get_voted(Item).page(params[:page])
    respond_to :html, :js          
  end
end

profiles/show.html.haml

.menu
  = link_to 'Covers', profile_path(filter: "covers")
  = link_to 'Items', profile_path(filter: "items") 
.objects
  = render 'profiles/covers' if !params[:filter] || params[:filter] == "covers"
  = render 'profiles/items' if params[:filter] == "items"

profiles/_covers.rb

- if @covers.any?
    .covers= render @covers
    .pagination= link_to_next_page @covers, 'View More', params: params, remote: true
- else
    = "No covers yet..."

profiles/_items.rb

- if @items.any?
    .items= render @items
    .pagination= link_to_next_page @items, 'View More', params: params, remote: true
- else
    = "No items yet..."

profiles/show.js.haml

- if !params[:filter] || params[:filter] == "covers"
    $('.covers').append("#{j render @covers}");
    - if @covers.last_page?
      $('.pagination').remove();    
    - else
      $('.pagination').html("#{j link_to_next_page(@covers,'View More', params: params, remote: true)}");

- if params[:filter] == "items"
    $('.items').append("#{j render @items}");
    - if @items.last_page?
      $('.pagination').remove();    
    - else  
      $('.pagination').html("#{j link_to_next_page(@items,'View More', params: params, remote: true)}");

app/assets/javascripts/pagination.js

$(function() {
  if ($('.pagination').size() > 0) {
    $(window).on('scroll', function() {
      var next_page_url = $('.pagination a[rel=next]').attr('href');
      if (next_page_url && $(window).scrollTop() > $(document).height() - $(window).height() - 200) {
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..."/>');
        $.getScript(next_page_url);
  }
});

} });

user3275852
  • 61
  • 7

1 Answers1

1

Since the if statement disrupted the ajax call, I had to work around it:

I merged _covers.html.haml and _items.html.haml to one partial _models.html.haml:

- if @models.any?
    .models= render @models
    .pagination= link_to_next_page @models, 'View More', params: params, remote: true
- else
    .text-center= "Nothing yet..."

and handled the conditions in the controller:

  def show  
    if !params[:filter] || params[:filter] == "covers"  
      @models = @user.get_voted(Cover).page(params[:page]) 
    elsif params[:filter] == "items"  
      @models = @user.get_voted(Item).page(params[:page])
    end 
    respond_to :html, :js          
  end

hope this helps anyone!

user3275852
  • 61
  • 7