Блог

У меня есть приложение со страницей элементов, которые имеют некоторые параметры сортировки вверху. Элементы используют плагин InfiniteScroll от desandro.

При загрузке страницы InfiniteScroll работает нормально. Он берет URL-адрес из следующей ссылки paginator и отлично работает:

 $('.car-grid').infiniteScroll({
  path: '.paginator--cars .next_page a',
  append: '.car',
  scrollThreshold: 0
});
  

Однако проблема возникает, когда я нажимаю один из параметров сортировки вверху. Щелчок по опции сортировки перехватывается моим скриптом, он сначала уничтожает экземпляр infinitescroll, затем выполняет вызов ajax и возвращает json-файл с двумя элементами. Один из них представляет собой html-блок новых автомобилей, а второй — html-код обновленного paginator.

Затем это передается в Handlebars.js и шаблон используется для обновления страницы. Затем я повторно инициализирую infinitescroll для нового набора машин.

Проблема в том, что, поскольку paginator был сгенерирован запросом по URL-адресу .json, .json добавляется ко всем ссылкам в paginator . это приводит к тому, что InfiniteScroll возвращает неправильный тип результата и, следовательно, работает некорректно.

У кого-нибудь есть какие-либо предложения о том, как я мог бы обойти это?

Вот сценарий:

 $(document).on('change', '[type="radio"][name="sort"]', function() {

  console.log('Destroying infiniteScroll');
  $('.car-grid').infiniteScroll('destroy');

  let selected = $(this).val();
  let url = new URI();

  url.removeQuery('sort');
  url.addQuery('sort', selected);
  url.removeSearch('page');
  url.addQuery('page', 1);
  url.suffix('json');

  updateGrid(url);
});
  

 function updateGrid(url) {
  console.log(url);

  $.ajax({
    url: url,
    type: 'GET',
    success: function(data) {
      let template = $('#car-grid-template').html();

      let templateScript = Handlebars.compile(template);

      let html = templateScript(data);

      $('.thearea').html($(html));

      $('.car-grid').infiniteScroll({
        path: '.paginator .next_page a',
        append: '.car',
        scrollThreshold: 0
      });

      $('.car-grid').on( 'request.infiniteScroll', function( event, path ) {
        console.log( 'Loading page: '   path );
      });
    }
  });
}
  

 json.car_grid_html render partial: 'cars/car_grid.html.erb', locals: { cars: @cars }
json.paginator_html paginate(@cars, window: 1, outer_window: 2)
json.paginator_info_html page_entries_info(@cars)
  

Вам нужно добавить dataType: 'html', в свои параметры ajax. Смотрите это http://api.jquery.com/jquery.ajax / и перейдите к разделу Тип данных