无限滚动ajax请求触发，但不显示下一个分页页面 [英] Infinite scroll rails ajax request firing, but not displaying next paginated page

问题描述

我有一个正在使用will_paginate的Rails应用程序.然后，我将will_paginate用作无限滚动的基础.经过大量的反复试验，该请求似乎仍然有效，但该请求未呈现应用中的下一页内容，而是重新呈现了我所有的内容，并再次以分页形式显示.我认为这与我的.each迭代器部分相关，但我不确定.

下面是我的部分代码，控制器，js.erb，coffescript和日志.如果有人可以通过某种原因无法正常工作，我将不胜感激！

日志:您可以看到它正在获取下一页，并且在每个请求的所有5个页面上都这样做:

Started GET "/links?page=2&_=1451404304001" for ::1 at 2015-12-29 10:51:46 -0500
Processing by LinksController#index as JS
  Parameters: {"page"=>"2", "_"=>"1451404304001"}
  Link Load (0.2ms)  SELECT  "links".* FROM "links" LIMIT 5 OFFSET 5
   (0.1ms)  SELECT COUNT(*) FROM "links"
  Link Load (0.2ms)  SELECT  "links".* FROM "links"  ORDER BY "links"."cached_votes_score" DESC LIMIT 5 OFFSET 5
  CACHE (0.0ms)  SELECT COUNT(*) FROM "links"

_link.html.erb:

    <!-- order links based on total number of votes -->

  <div class="link row clearfix">
    <h2>

    </h2>
    <h2>
      <%= link_to link.title, link %><br>
    </h2>
    <p>
      <%= link_to link.url, link %><br>
    </p>

<!-- acts_as_votable for like_link -->
    <div class="btn-group">
        <%= link_to like_link_path(link), method: :put, class: "btn btn-default btn-sm" do %>
          <span class="glyphicon glyphicon-chevron-up"></span>
          Upvote
          <%= link.get_upvotes.size %>
        <% end %>
        <%= link_to dislike_link_path(link), method: :put, class: "btn btn-default btn-sm" do %>
          <span class="glyphicon glyphicon-chevron-down">
          Downvote
          <%= link.get_downvotes.size %>
        <% end %>
    </div>
  </div>

index.js.erb:

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

link.js.coffee:

jQuery ->
        $(window).scroll ->
            if $(window).scrollTop() > $(document).height() - $(window).height() - 50
                    $.getScript($('.pagination a.next_page').attr('href'))

links_controller.rb索引操作:

class LinksController < ApplicationController
  before_filter :authenticate_user!, except: [:index, :show]

  def index
    @links = Link.order(cached_votes_score: :desc).paginate(page: params[:page], per_page: 5)

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

index.html.erb:

<div class = "sort_paginate_ajax"><%= render @links %></div>

<div id="quotes_links">
  <%= will_paginate @links %>
</div>

当我将index.js.erb更改为Miles在第一个评论中建议的更改时，现在出现以下未定义的方法错误:

ActionView::Template::Error (undefined method `total_pages' for 3:Fixnum):
    1: $('#links').append('<%= j render(@links) %>');
    2: <% if @links.next_page %>
    3:   $('.pagination').replaceWith('<%= j will_paginate @links.next_page %>');
    4: <% else %>
    5:   $('.pagination').remove();
    6: <% end %>

解决方案

<% @links.order(cached_votes_score: :desc).each do |link| %>

您不需要这样做，因为您正在呈现ActiveRecord模型的集合:

$('#links').append('<%= j render(@links) %>');

Rails将遍历链接，并为每个链接局部渲染app/links/_link.html.erb.因此，此部分应该只包含显示一个不同链接的HTML.您可以在其中使用link变量.

也请尝试在视图中不要使用order，但要在控制器操作中使用.当您将实例变量传递给视图时，应准备好使用它，而无需其他查询.最好将所有查询和逻辑保留在控制器和模型中，并且不要将它们混入视图中.

I have a rails app that I am using will_paginate for. I am then using will_paginate as a basis for infinite scroll. After a lot of trial and error, the request seems to be working, but instead of rendering the next page of content in the app, the request is re-rendering all of my content and displaying it in paginated form again. I have a thought that it is to do with my .each iterator in my partial, but I am not sure exactly.

Below is my partial, controller, js.erb, coffescript, and logs. If anyone can help with a reason why this is not working properly, I would greatly appreciate it!

Logs: you can see that it is getting the next page, and it does that for all 5 pages on each request:

Started GET "/links?page=2&_=1451404304001" for ::1 at 2015-12-29 10:51:46 -0500
Processing by LinksController#index as JS
  Parameters: {"page"=>"2", "_"=>"1451404304001"}
  Link Load (0.2ms)  SELECT  "links".* FROM "links" LIMIT 5 OFFSET 5
   (0.1ms)  SELECT COUNT(*) FROM "links"
  Link Load (0.2ms)  SELECT  "links".* FROM "links"  ORDER BY "links"."cached_votes_score" DESC LIMIT 5 OFFSET 5
  CACHE (0.0ms)  SELECT COUNT(*) FROM "links"

_link.html.erb:

    <!-- order links based on total number of votes -->

  <div class="link row clearfix">
    <h2>

    </h2>
    <h2>
      <%= link_to link.title, link %><br>
    </h2>
    <p>
      <%= link_to link.url, link %><br>
    </p>

<!-- acts_as_votable for like_link -->
    <div class="btn-group">
        <%= link_to like_link_path(link), method: :put, class: "btn btn-default btn-sm" do %>
          <span class="glyphicon glyphicon-chevron-up"></span>
          Upvote
          <%= link.get_upvotes.size %>
        <% end %>
        <%= link_to dislike_link_path(link), method: :put, class: "btn btn-default btn-sm" do %>
          <span class="glyphicon glyphicon-chevron-down">
          Downvote
          <%= link.get_downvotes.size %>
        <% end %>
    </div>
  </div>

index.js.erb:

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

link.js.coffee:

jQuery ->
        $(window).scroll ->
            if $(window).scrollTop() > $(document).height() - $(window).height() - 50
                    $.getScript($('.pagination a.next_page').attr('href'))

links_controller.rb index action:

class LinksController < ApplicationController
  before_filter :authenticate_user!, except: [:index, :show]

  def index
    @links = Link.order(cached_votes_score: :desc).paginate(page: params[:page], per_page: 5)

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

index.html.erb:

<div class = "sort_paginate_ajax"><%= render @links %></div>

<div id="quotes_links">
  <%= will_paginate @links %>
</div>

When I changed my index.js.erb to the change recommended in the first comment by Miles, I now get the following undefined method error:

ActionView::Template::Error (undefined method `total_pages' for 3:Fixnum):
    1: $('#links').append('<%= j render(@links) %>');
    2: <% if @links.next_page %>
    3:   $('.pagination').replaceWith('<%= j will_paginate @links.next_page %>');
    4: <% else %>
    5:   $('.pagination').remove();
    6: <% end %>

解决方案

<% @links.order(cached_votes_score: :desc).each do |link| %>

You don't need to do this, because you're rendering a collection of ActiveRecord models:

$('#links').append('<%= j render(@links) %>');

Rails will iterate over links and render app/links/_link.html.erb partial for each link. So this partial should contain only HTML displaying one distinct link. You can use link variable inside it.

Also try to not use order in views, but do so in a controller action. When you pass an instance variable to a view it should be ready to be used, without additional queries. It's better to keep all queries and logic inside controllers and models and don't mix them into views.

这篇关于无限滚动ajax请求触发，但不显示下一个分页页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！