У меня есть простая пагинация на 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()!
Следует переопределить эту функцию или вызывать скрипт заново, я пробовал добавлять функцию в переменную и затем удалять её и переопределять, но это не помогает.
