Question

我有一个应用程序，该应用程序的页面顶部有一些排序选项。这些物品正在使用desandro的InfiniteScroll插件。

页面加载时，infiniteScroll可以正常工作。它从分页器的下一个链接中获取URL，并且效果很好：

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

但是，当我单击顶部的排序选项之一时，就会出现问题。我的脚本拦截了对sort选项的单击，它首先破坏了infinitescroll实例，然后进行了ajax调用，并返回了包含两个项目的json文件。一个是新车的html块，第二个是更新的分页器的html。

然后将其输入到Handlebars.js，并使用模板来更新页面。然后，我重新初始化新车上的无限滚动。

问题在于，由于分页器是由.json URL上的请求生成的，因此将.json添加到分页器中的所有链接。这会导致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)

Answer 1

您需要将dataType: 'html',添加到您的Ajax参数中。参见此http://api.jquery.com/jquery.ajax/并滚动到dataType部分

更改分页器的Kaminari网址

1 个答案: