JS controlling ajax tabs and JS controlling will_paginate in same js.erb not working (endless scroll)

Question

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

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.

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

the view

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

Controller

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

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

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.

UPDATE:

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

Answer 2

there is a missing <% end %> tag. I which that is not the problem. Try something like this:

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