Salut à tous, voici mon soucis. J'ai une page sur laquelle sont situés mes articles avec un système de pagination en AJAX grâce au bundle knp paginator. Depuis cette page je peux aussi supprimer un article via un bouton "supprimer". La suppression en AJAX fonctionne. Lorsque je supprime le dernier article de la page en cours je souhaiterai que l'utilisateur soit redirigé sur la page précédente. (par exemple si je supprime le dernier article de la page 2, je souhaiterai être redirigé sur la page 1). Pour le moment, ma page reste vide et ma pagination ne fonctionne plus correctement (à moins que je rafraichisse la page, sans AJAX donc...). J'avoue bloquer à partir de là.

Merci d'avance pour vos réponses.

Ma page d'index :

https://sharemycode.fr/fdp (Impossible de copier du Twig sur OPC)

Mon fichier twig avec ma boucle for affichant chaque article :

https://sharemycode.fr/ph0 (Impossible de copier du Twig sur OPC)

 Mon fichier Javascript avec l'AJAX :

document.addEventListener("DOMContentLoaded", function() {
    document.querySelector('#article-card-list').addEventListener('click', onClickBtnLike);

    function onClickBtnLike(event){
        if(event.target.classList.contains("delete-article")){
            var el = event.target.closest('.delete-article-form');
            $(el).on("submit", function(e){
                e.preventDefault();
                const urlAction = $(this);
                const url = 'http://localhost:8000' + urlAction.attr('action');
                var thisCard = e.target.closest('.card');
                var allCard = document.getElementsByClassName('card');
                
                axios.get(url).then(
                    thisCard.remove(),
                    ).catch(function(error) {
                        window.alert("Une erreur s'est produite, réessayez plus tard");
                    });

                if(allCard.length == 0){
                    var list = document.getElementById("article-card-list");
                    list.outerHTML = `Page vide`;
                }
                });
        }
    }

    var total = document.querySelector('.js-total')
    var pagination = document.querySelector('.js-filter-pagination')
    var sorting = document.querySelector('.js-filter-sorting')
    var content = document.querySelector('.js-filter-content')

    const aClickListener = e => {
        if(e.target.tagName === 'A'){
            e.preventDefault()
            loadUrl(e.target.getAttribute('href'))
        }
    }

    sorting.addEventListener('click', aClickListener)
    pagination.addEventListener('click', aClickListener)

    async function loadUrl(url) {

        const response = await fetch(url, {
            headers: {
                'X-Requested-With': 'XMLHttpRequest'
            },
        })
        if(response.status >= 200 && response.status < 300){
            const data = await response.json()
            total.innerHTML = data.total
            content.innerHTML = data.content
            sorting.innerHTML = data.sorting
            pagination.innerHTML = data.pagination
            history.replaceState({}, '', url)
        } else {
            console.error(response)
        }
    }
}

-
Edité par nicoSinje 30 novembre 2021 à 16:30:08