@greedy_wizard

Не работает loadmore функция на JS в фильтре AJAX?

У меня есть фильтр на 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()
}
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

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