在 Rails 的 will_paginate 中使用无限滚动时 Ajax 选项卡中的错误答案

【问题标题】：Error in Ajax tabs when using endless scroll with Rails' will_paginate在 Rails 的 will_paginate 中使用无限滚动时 Ajax 选项卡中的错误
【发布时间】：2014-02-04 06:43:32
【问题描述】：

TL;DR

我的 AJAX 选项卡无法与我实现的无限滚动 (will_paginate) 一起使用。

详情

我有一个带有 ajax 选项卡的页面，该选项卡在我的控制器中加载不同的操作以呈现具有不同内容的部分。所以“流行视图”在顶部有两个远程：真正的链接。他们工作正常。他们使用 respond_to js 适当地渲染相应的部分。

问题是我也在用 will_paginate 对这些部分进行分页（像 ryan bates 的截屏视频一样无休止的滚动）。

这意味着我不想在 js.erb 中运行代码，因为控制我的选项卡的 AJAX 被放置在那里。这意味着它只是替换（.html）我的内容，而不是像无限滚动脚本试图做的那样（以及在我的其他页面上做的）附加新内容。

但即使我知道这会给我带来问题，我也不知道如何解决问题：

问题：popular.js.erb

$("#feed-content").html("<%= escape_javascript(render(:partial => 'feed_content')) %>");


$('#products').append('<%= escape_javascript(render(:partial => 'feed_content', :products      => @products, :remote => true)) %>');
<% if @products.next_page %>
$('.pagination').replaceWith('<%= escape_javascript( will_paginate(@products)) %>');
<% else %>
$('.pagination').remove();
<% end %>

Products_controller

def popular
   @products = Product.paginate(:page => params[:page], :per_page => 6)
 respond_to do |format|
  format.html 
  format.js 
 end
end

def sale
   @products = Product.paginate(:page => params[:page], :per_page => 6)
 respond_to do |format|
  format.html 
  format.js 
 end
end

查看/popular.html.erb

<header>
<p>Sort by <%= link_to "popular", products_popular_path, :remote => true, :class => "active"%> or <%= link_to "sale", products_sale_path, :remote => true%></p> 
</header>
<div class="bucket layout-single-column" id="feed-content">
<%= render "feed_content", :products => @products%>
</div>
<%= will_paginate @products %>

部分：_feed_content.html.erb

 <div id="products">
<% @products.each do |product|%>
  #CODE 
<% end %>

products.js.coffee

jQuery ->
  if $('.pagination').length
      $(window).scroll ->
              url = $('.pagination .next_page').attr('href')
              if url &&  $(window).scrollTop() > $(document).height() - $(window).height() - 50
                      $('.pagination').text('Fetching more products...')
                      $.getScript(url)
$(window).scroll()

【问题讨论】：

标签： javascript ruby-on-rails ajax scroll will-paginate

【解决方案1】：

我自己找到了解决方案。我在我的“远程真实”链接中添加了 ID，就像这样。在这种情况下“流行”：

<p>Sort by <%= link_to "popular", products_popular_path(:feed => "popular"), :remote => true, :class => "active", :id => "popular"%>

然后在相应的popular.js.erb 文件中，我向控制选项卡的ajax 添加了一个onclick 事件。这意味着 ajax 仅在单击链接时运行，而不是在页面应该进行无限滚动部分时运行。

$("#popular").click(function() {
$("#feed-content").html("<%= escape_javascript(render(:partial => "#{@partial_name}")) %>");
});

$('#products').append('<%= escape_javascript(render(:partial => "#{@partial_name}")) %>');
<% if @products.next_page %>
$('.pagination').replaceWith('<%= escape_javascript( will_paginate(@products)) %>');
<% else %>
$('.pagination').remove();
<% end %>

可能有更好更清洁的方法，但这对我有用。我问了另一个问题here，这与这个问题几乎相同。只是如果有人需要更多详细信息。

更新：

上述解决方案需要在链接上单击两次才能呈现部分内容。应该使用下面的代码：

$('#popular').bind('ajax:complete', function() {
  $("#feed-content").html("<%= escape_javascript(render(:partial => "popular_content")) %>");
});

【讨论】：