Изменить Kaminari URL-адрес для paginator - PullRequest
Новая
       6

Изменить Kaminari URL-адрес для paginator

0 голосов
/ 09 апреля 2019

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

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

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

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

Это затем подается в Handlebars.js и шаблон используется для обновления страницы. Затем я повторно инициализирую бесконечную прокрутку на новом наборе автомобилей.

Проблема в том, что, поскольку 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)

1 Ответ

0 голосов
/ 09 апреля 2019

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

...