@turbomen24

Конфликт двух ajax-запросов — бесконечная прокрутка и фильтр. Как перезагрузить скрипт?

У меня есть простая пагинация на php и js-скрипт, который при прокрутке страницы в самый низ получает новые посты со следующей страницы пагинации.
Так же я пробую добавить скрипт, который при клике на фильтры загружает посты из заданной категории так же по ajax.

Скрипт фильтра:
$(document).on('click', '.ajax-js', function(e){
	e.preventDefault();
	console.log('filter click');
	var link = $(this).attr('href');
	$.ajax({
		url: link,
		dataType: 'html',
		action: $("html, body").animate({ scrollTop: 0 }, 200),
		success: function(data) {
			var replacement = $('<div />').append(data).find('#replacement-js').html();
			$('#replacement-js').html(replacement);
			history.pushState(null, null, link);
		},
	});
});


Скрипт подгрузки при скролле:
jQuery(document).ready(function($){
	var next = 2;
	var progress = false;
	$(document).on('scroll', function() {
		if($(window).scrollTop() + $(window).height() >= $(document).height() && !progress) {
			console.log('pagination '+next);
			$.ajax({
				url: location.href,
				dataType: 'html',
				method: 'get',
				data: "nav="+next,
				beforeSend: function() {
					progress = true;
				},
				success: function(data) {
					var result = $('<div />').append(data).find('.posts-box').html();
					$('.posts-box').append(result);
					progress = false;
					next +=1;
				}
			});
		}
	});
});


Переменная "next" - следующая страница пагинации, по дефолту она равна двум, пока что мы всегда находимся изначально на первой странице пагинации.

При прокрутке страницы вниз я записываю в консоль страницу пагинации, с которой подгружаются посты, при клике на фильтр записываю туда "filter click".
После клика на фильтр, скрипт подгрузки не переопределяется - отсчёт пагинации должен начинаться снова с 2, но он продолжается дальше, и это логично, если я имею два разных файла (ajax-filter и ajax-scroll), в консоли соответственно после скролла вниз, клика по фильтру и нового скролла будет следующее:

pagination 2
pagination 3
pagination 4
filter click
pagination 5
pagination 6
pagination 7

Ведь в функции скролла указано, что каждый раз при скролле вниз страницы переменная next увеличивается на один.
Я понимаю, что нужно заново вызывать эту функцию каждый раз после клика на фильтр. Допустим, я делаю следующее в файле "ajax-scroll":

function myFunc() {
    // stuff...
}


Далее в шаблоне вызываю эту функцию внутри элемента "replacment-js", куда вставляю посты после клика на фильтр. Таким образом, после клика на фильтр каждый раз функция будет вызываться заново. Но старый вызов функции ведь всё равно остаётся в памяти браузера, таким образом после клика на фильтр и скролла вниз страницы видим двойной вызов функции myFunc()!

Следует переопределить эту функцию или вызывать скрипт заново, я пробовал добавлять функцию в переменную и затем удалять её и переопределять, но это не помогает.
  • Вопрос задан
  • 145 просмотров
Решения вопроса 1
Kozack
@Kozack Куратор тега JavaScript
Thinking about a11y
Вам нужно не хранить состояние пагинации в переменной next, а получать его на лету прямо перед отправкой запроса. Уж не знаю как там у вас страница устроена. Например из глобальной переменной, или как-то по dom определять или по текущей ссылке (если она меняется) и так далее. И тогда при изменении фильтров -- сбрасывать это состояние.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы