JS控制ajax选项卡和JS控制will_paginate在相同的js.erb不工作(无限滚动)

时间:2014-01-17 07:30:44

标签: javascript ruby-on-rails ajax tabs will-paginate

我试图解决这个问题一段时间,但我找不到解决方案。我有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

2 个答案:

答案 0 :(得分:0)

缺少<% 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 %>

答案 1 :(得分:0)

我自己找到了解决方案。我将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")) %>");
});