Bonjour à tous,

Dans un projet Symfony/JS/Ajax j'ai créé un simple formulaire avec un input de saisie + le bouton de submit correspondant et en dessous de celui-ci doit s'afficher la liste des éléments existants en bdd retournés par ma requête Ajax (fetch)...

Tout fonctionne coté code excepté le fait que je voudrais que la liste sous l'input s'actualise sans que le formulaire renvoie des données ni qu'il n'y ait des messages avertissant le renvoi de requêtes par certains navigateurs...

J'ai essayé en intégrant "e.preventDefault()" mais rien y fait la page entière est rafraîchie au lieu de seulement ma liste d'items...

Quelle serait la stratégie à adopter svp ?

Merci d'avance

Main.js

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
window.onload = () => {
 
    const tblMarques = document.getElementById('tblMarques')
 
    tblMarques.addEventListener('click', e => {
        e.preventDefault
        if (e.target.id === "btn-supprimer-marque") {
            if (confirm("Etes vous sûr de vouloir effacer cette marque de véhicule ?.")) {
                const id = e.target.getAttribute('data-id')
 
                fetch(`/supprimer/${id}`, {
                    method: 'DELETE'
                }).then(res=>window.location.reload(true))
                .catch(error =>error.message)
            }
        }
    })
}