Question

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()

Answer 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")) %>");
});

使用Rails'will_paginate的无限滚动时Ajax选项卡出错

1 个答案: