相同的js.erb中的JS控制ajax标签和JS控制will_paginate无法正常工作(无限滚动) [英] JS controlling ajax tabs and JS controlling will_paginate in same js.erb not working (endless scroll)

问题描述

我已尝试解决此问题一段时间，但找不到解决方案.我有ajax控制页面选项卡上的某些内容，效果很好:

I have tried to fix this for some time, but I cannot find the solution. I have ajax controlling some on page tabs, which is working fine:

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

但是后来我添加了will_paginate并进行了无限滚动，在其中，我将控制它的js放在与上述(sale.js.erb)相同的js.erb文件中:

But then I added will_paginate with endless scrolling, where I put the js that is controlling that in the same js.erb file as the above (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 %>

但是那不起作用.但是每个部分都是单独工作的.

But that do not working. But each part work individually.

然后我尝试了此操作，但仍然无法正常工作(仅加载if部分):

Then i tried this, but it still does not work (it only loads the if part):

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

推荐答案

我自己找到了一个解决方案.我将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 %> 

也许有更好更好的方法，但这对我有用.我在此处a>几乎与此相同.就算有人需要更多细节.

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

这篇关于相同的js.erb中的JS控制ajax标签和JS控制will_paginate无法正常工作(无限滚动)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！