Discussion :

[clickandgo]

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)
            }
        }
    })
}

[NoSmoking]

Bonjour,

Quelle serait la stratégie à adopter svp ?

ne pas demander le rechargement de la page au retour de la requête donc à traiter dans ton fetch :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
fetch(`/supprimer/${id}`, {
    method: 'DELETE'
  })
  .then((response) => response.json())
  .then((datas) => {
    // construction de la liste ici
  })
  .catch(error => error.message)

[clickandgo]

Merci pour la réponse NoSmoking...

Si je comprends bien il faut construire la liste de résultats en JS sans utiliser TWIG ?

Pour obtenir la liste des valeurs restantes ne doit on pas faire un autre fetch sur un autre contrôleur ?

Bien évidement la solution de fainéant serait de séparer le formulaire de la liste

[NoSmoking]

Si je comprends bien il faut construire la liste de résultats en JS sans utiliser TWIG ?

rien ne t'empêches de construire, côté serveur, du HTML plutôt que du JSON, ma préférence, mais on s'en fout un peu, restant au retour JSON plus light !