Как заставить бесконечную прокрутку will_paginate работать с поиском без обновления в Rails 5? - PullRequest
Новая
       30

Как заставить бесконечную прокрутку will_paginate работать с поиском без обновления в Rails 5?

0 голосов
/ 11 ноября 2018

Несколько дней моя команда пыталась заставить бесконечную прокрутку 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.

Некоторые коды, которые могут иметь или не иметь отношение к делу: 

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