Discussion :

[ZakiDev]

Bonjour,

Je travaille actuellement sur un forum et souhaiterai avoir la possibilité de supprimer un post ou sujet avec un bouton delete en AJAX.
J'ai suivi quelques tuto sur la méthode fetch et testé un code dans ce genre

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
document.getElementById("suppr").addEventListener("onClick", function(e){
 
    e.preventDefault();
 
    const url = this.href;
    console.log(url);
 
    fetch(url, {
        method: "DELETE"
    })
        .then(function(response) {
            alert(response);
        })
})

Ce qui ne fonctionne absolument pas. Je sais que le preventDefault on peut l'utiliser sur le submit d'un formulaire pour éviter le rechargement de la page. Du coup j'ai fais la meme chose avec le bouton delete mais ça ne prend pas en compte ce code.

Si vous aurez quelques tuyaux je serai preneur, j'ai regardé un peu partout sur le net je n'ai pas trouvé de solutions.

Merci d'avance !

[jreaux62]

Code :

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

addEventListener("click",...

[ZakiDev]

Merci c'est corrigé. Par contre je ne vois pas quoi mettre dans le then. J'ai toujours ma page qui se recharge.

[ZakiDev]

Bonjour,

Je reviens vers vous à ce sujet. Je ne sais pas comment supprimer un sujet en ajax. On est d'accord que le preventDefault va ici empêcher d’accéder au lien ?

C'est comme si le prevendtDefault était ignoré.

Si vous avez une idée, merci.

[ZakiDev]

J'ai pu avancé un peu sur le schmilblick.
Maintenant quand je clique sur le bouton de suppression ça fonctionne bien, le sujet est bien supprimé de la bdd. Le preventDefault est bien pris en compte et l'url du bouton href également (j'ai remplacé this.href par item.href). Par contre la ligne ne disparait pas en live, il faut que je recharge la page pour voir la ligne disparaitre.

Mon dernier code en date

Code JavaScript :

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
let deleteButton = document.querySelectorAll('.suppr').forEach(item => {
 
    item.addEventListener('click', (e) => {
        e.preventDefault();
 
        const url = item.href;
        console.log(url);
 
        fetch(url, {
            method: 'GET'
        })
            .then(response => response)
            .then(response => console.log(response));
    })
 
});

Le log de la reponse



Si vous pouvez m'aider à faire en sorte que la ligne disparaisse au click.

[Toufik83]

Bonjour,

Si le bouton .suppr est sur la même ligne que tu veux supprimer, tu peux revenir à son parent supérieur avec closest('tr').

Code :

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

1
2
3
4
5
6
7
8
9
10
 
...
.then(response => response)
.then(response ()=> {
  console.log(response);
  if(response.ok===true){
    //le tr est le parent supérieur du bouton .suppr 
    item.closest("tr").remove();
  }
});

[ZakiDev]

Merci beaucoup pour ta réponse ça fonctionne enfin !