在Rails的will_paginate中使用无穷滚动时，Ajax选项卡中的错误 [英] Error in Ajax tabs when using endless scroll with Rails' will_paginate

问题描述

TL; DR

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

My AJAX tabs are not working together with my implementation of endless scrolling (will_paginate).

详细信息

我有一个页面，该页面带有ajax选项卡，该选项卡在控制器中加载不同的操作以呈现具有不同内容的部分.因此，热门视图"在顶部具有+2个远程链接:true链接.他们工作正常.他们使用react_to js适当地渲染了相应的部分.

I have a page that has ajax tabs that loads different actions in my controller to render a partial with different content. So the "popular-view" has +two remote: true links at the top. They work fine. They render the corresponding partial appropriately using the respond_to js.

问题是，我也在用will_paginate(像ryan bates的屏幕录像那样无休止地滚动)对这些部分进行分页.

The problem is that I'm also paginating these partials with will_paginate (endless scrolling like ryan bates' screencast).

这意味着我不想在js.erb中运行代码，因为控制我的标签的AJAX放在了那里.这意味着它只是替换(.html)我的内容，而不是像无限滚动脚本试图做的那样(以及在我的其他页面上)添加新的内容.

This means that I dont want to run the code in the js.erb because the AJAX controlling my tabs is placed there. This means that its just replacing (.html) my content instead of appending the new content the way infinite scroll script is trying to do (and does on my other pages).

但是，即使我知道这会导致我遇到问题，我也不知道如何解决该问题:

But even though I know it causes me problems I don´t know how to solve the problem:

问题: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

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

推荐答案

我自己找到了一个解决方案.我将ID添加到我的远程真实"链接中，如下所示.在这种情况下，受欢迎":

I found a solution myself. I added ID's to my "remote true"-links like this. In this case "popular":

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

然后在相应的Popular.js.erb文件中，向控制选项卡的ajax添加了onclick事件.这意味着ajax仅在单击链接时才运行，而不是在页面应做无尽滚动部分时才运行.

Then in the corresponding popular.js.erb file I added an onclick event to the ajax that controls the tabs. This means that the ajax only runs when the link is clicked at not when the page is supposed to do the endless-scrolling part.

$("#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 %> 

也许有更好更好的方法，但这对我有用.我问了另一个问题

There may be a better and cleaner way, but this worked for me. I have asked another question here that is almost the same as this one. Just if someone needs more details.

更新:

上述解决方案需要在链接上单击两次以呈现部分内容.应该改用下面的代码:

The above solution required two clicks on the link to render the partial. The code beneath should be used instead:

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

这篇关于在Rails的will_paginate中使用无穷滚动时，Ajax选项卡中的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！