JS控制ajax选项卡和JS控制will_paginate在同一个js.erb中不起作用(无休止的滚动)

Question

我已经尝试解决此问题一段时间了，但我找不到解决方案。我让 ajax 控制一些页面选项卡上的内容，它工作正常：

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

但是后来我添加了无休止滚动will_paginate，我将控制它的js放在与上述相同的js.erb文件中（sale.js.erb）：

$("#feed-content").html("<%= escape_javascript(render(:partial => "#{@partial_name}")) %>");
$('#products').append('<%= escape_javascript(render(:partial => 'sale_content', :products => @products, :remote => true)) %>');
<% if @products.next_page %>
$('.pagination').replaceWith('<%= escape_javascript( will_paginate(@products)) %>');
<% else %>
$('.pagination').remove();
<% end %>

但这行不通。但每个部分都单独工作。

然后我尝试了这个，但它仍然不起作用（它只加载 if 部分）：

<% if params[:feed]%>
$("#feed-content").html("<%= escape_javascript(render(:partial => "#{@partial_name}")) %>");
<% else %>
$('#products').append('<%= escape_javascript(render(:partial => 'sale_content', :products => @products, :remote => true)) %>');
<% if @products.next_page %>
$('.pagination').replaceWith('<%= escape_javascript( will_paginate(@products)) %>');
<% else %>
$('.pagination').remove();
<% end %>

视图

...
<p class="hero-description-dark local-nav-container">Sort by <%= link_to "popular", products_popular_path(:feed => "popular"), :remote => true, :class => "active"%> or <%= link_to "sale", products_sale_path(:feed => "sale"), :remote => true%></p> 

控制器

def sale
 products = Product.gender(current_user).available.includes(:likes)
 @products = products.filter_by_categories(products).first(100).paginate(:page =>  params[:page], :per_page => 6)
 @partial_name = "sale"
 respond_to do |format|
  format.html
  format.json { render json: @products}
  format.js
end
  end

Answer 1

缺少

<% end %>标签。我这不是问题。尝试这样的事情：

<% if params[:feed].present? %>
   $("#feed-content").html("<%= escape_javascript(render(:partial => "#{@partial_name}")) %>");
<% else %>
   $('#products').append('<%= escape_javascript(render(:partial => 'sale_content', :products => @products, :remote => true)) %>');
   <% if @products.next_page %>
     $('.pagination').replaceWith('<%= escape_javascript( will_paginate(@products)) %>');
   <% else %>
     $('.pagination').remove();
   <% end %>
<% end %>

Answer 2

我自己找到了解决方案。我像这样将 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 %> 

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

更新：

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

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