У меня есть фильтр на JavaScript. Первая функция для loadmore. Вторая функция для фильтрации постов.
Когда я нажимаю на один из элементов фильтра - сообщения загружаются правильно, но кнопка loadmore (функция) не работает. Пожалуйста, помогите мне исправить мои функции
//-----LOAD MORE POSTS-----------------------------------------------------
if (document.querySelector('#postsList') && typeof agds !== 'undefined') {
var loadMorePosts = () => {
const postsList = document.getElementById('postsList'),
loadmoreBtn = document.querySelector('.loadmore-btn'),
rowAppend = postsList.querySelector('.row-append')
console.log(loadmoreBtn);
if (loadmoreBtn) {
const maxPagesPosts = loadmoreBtn.dataset.maxPages,
query = loadmoreBtn.dataset.query,
btnSendingText = loadmoreBtn.dataset.btnSending,
btnLoadText = loadmoreBtn.textContent
let currPagePosts = loadmoreBtn.dataset.currentPage
loadmoreBtn.addEventListener('click', loadPostss)
async function loadPostss(e) {
e.preventDefault();
const formData = new FormData()
formData.append('action', 'load_more_posts')
formData.append('nonce', agds.ajax.nonce)
formData.append('page', currPagePosts)
formData.append('query', query)
//BeforeSend
fadeIn(preloader)
if (currPagePosts >= maxPagesPosts) {
fadeOut(preloader)
} else {
loadmoreBtn.innerHTML = btnSendingText
fadeIn(preloader)
}
//Send
let response = await fetch(agds.ajax.url, {
method: 'POST',
body: formData
});
//Success
if (response.ok) {
let result = await response.text();
rowAppend.insertAdjacentHTML('beforeend', result);
fadeOut(preloader)
loadmoreBtn.innerHTML = btnLoadText
currPagePosts++
loadmoreBtn.setAttribute('data-current-page', currPagePosts)
if (currPagePosts >= maxPagesPosts) {
loadmoreBtn.style.display = 'none'
}
} else {
fadeOut(preloader)
loadmoreBtn.style.display = 'none'
console.log('Error data');
}
}
}
}
loadMorePosts()
}
//-----STORIES AJAX FILTER -----------------------------------------
if (document.querySelector('#postsFilter') && typeof agds !== 'undefined') {
const filterPosts = () => {
const postsList = document.getElementById('postsList'),
postsFilter = document.getElementById('postsFilter'),
postsFilterItems = postsFilter.querySelectorAll('.filter-list__item')
postsFilterItems.forEach(item => {
item.addEventListener('click', function (e) {
let catID = this.dataset.catId
async function loadPosts() {
const formData = new FormData()
formData.append('action', 'filter_posts')
formData.append('nonce', agds.ajax.nonce)
formData.append('catID', catID)
//BeforeSend
fadeIn(preloader)
//Send
let response = await fetch(agds.ajax.url, {
method: 'POST',
body: formData
});
//Success
if (response.ok) {
loadMorePosts()
let result = await response.text()
postsFilterItems.forEach(item => {
item.classList.remove('_active')
})
e.target.classList.add('_active')
postsList.innerHTML = result;
fadeOut(preloader)
} else {
fadeOut(preloader)
console.log('Error data')
}
}
loadPosts()
})
})
}
filterPosts()
}