Question

几天来，我的团队一直在尝试通过不刷新页面的搜索来使will_paginate的无限滚动工作，但到目前为止，我们仅设法使其中任何一个都可以工作，而且似乎令人沮丧的问题只是一行代码...

# All of index.js.erb

$("#cards").html("<%= escape_javascript(render(@cards)) %>");

$("#cards").append('<%= j render(@cards) %>');
<% if @cards.next_page %>
  $('.pagination').replaceWith('<%= j will_paginate(@cards) %>');
<% else %>
  $(window).off('scroll');
  $('.pagination').remove();
<% end %>

删除第一行时，无限滚动效果很好，但是搜索按钮将结果添加到下一页，而不会删除屏幕上已有的结果。

第一行在那里，屏幕上的所有卡都将被删除，新的卡将按预期结果显示在首页上，但无限滚动根本不会加载下一页。

最后...

我相信，如果有一种方法可以使第一行仅在按下“搜索”按钮后才能运行，那么它将解决问题，但是要理解.js.erb代码的工作原理，我们确实有很多问题。 / p>

一些可能不相关的代码：

# Search button in index.html.erb

<%= form_tag(report_index_url, method: :get, remote: true) do %>
  <div class="row">
  <input id="search" name="search" class="..." type="search" >
  <button onclick="topFunction()" class="..." type="submit"></button>
  </div>
<% end %>


# Index method in report_controller

@cards = Card.from_user(@current_user.id)

apply_filters
execute_search

@cards = @cards.paginate(page: params[:page], per_page: 10)

respond_to do |format|
  format.html
  format.js
end


# Entire report.coffee

$ ->
  if $('.pagination').length && $('#cards').length
    $(window).scroll ->
      url = $('.pagination .next_page').attr('href')
      if url && $(window).scrollTop() > $(document).height() - $(window).height() - 60
        $('.pagination').html('<img src="/assets/ajax-loader.gif" alt="Loading..." title="Loading..." />');
        $.getScript(url)
    $(window).scroll()

如何在Rails 5中使用无刷新搜索使will_paginate的无限滚动工作？

0 个答案: