3

几天来，我的团队一直在尝试通过不刷新页面的搜索来使 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 %>

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

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

最后...

我相信如果有办法让第一行仅在按下 Search 按钮后运行，它会解决问题，但我们确实有很多问题要理解 .js.erb 代码的工作原理。

一些可能相关或不相关的代码：

# 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()
4

0 回答 0