Ajout /suppression d'élément en Ajax

Par Mcolo Fils Hamam, il y a 9 ans


Bonjour,

Voila je rencontre un petit problème avec mon code.

j'ai crée un formulaire à remplir, à sa soumission les données sont envoyées à la base de données mysql puis si ces données sont bien ajoutées, et puis affichées dans un tableau sans rechager la page.
Jusque là aucun problème !
J'ai ajouté à la fin de ce tableau et pour chaque ligne un lien me permettant de supprimer un article. Suppression qui se fait en ajax via Jquery, tout comme l'ajout d'ailleurs. voici mes 2 fichiers
*Index.php***

<thead> <tr> <th>titre</th> <th>prix</th> <th>description</th> <th width='97px'>Action</th> </tr> </thead> <tbody> </tbody> </table>``` ```<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script> $(document).ready(function() { recup(); function recup(){ $.post('pages/mes-articles.php',function(data){ $('tbody').html(data); }); setInterval(recup,3000); } </script>``` ***********mes-articles.php************* ```<?php require "connect_db.php"; $stnt = $db->prepare("SELECT*FROM annonces "); $stnt->execute(); while($row=$stnt->fetch()){ ?> <tr <?php echo 'remove'.$row['id-annonces']?> > <td> <?php echo $row['titre']?></td> <td><?php echo $row['prix']?></td> <td><?php echo $row['description']?></td> <td> <button class="btn btn-warning">ajouter</button> <button class="remove " id='<?php echo $row['id-annonces']?>'>supprimer</button> </td> </tr> <?php } ?>``` Jusque là tout va bien ! ### mais si je veux supprimer un article que je viens d'ajouter à l'instant en ecoutant le click sur le bouton remove en précisant la class "remove" qui se trouve sur le button supprimer ,comme ça $(".remove").click(function(){ alert(test); }); ### Rien ne marche Dites moi ce que je dois faire pour ecouter le click sur mon button supprimer qui porte la class='remove' SVP, comme ça ne marche pas comme ça: $(".remove").click(function(){ alert(test); });

3 réponses

Benjamin Derepas, il y a 9 ans
$(".remove").on('click',function(e){ e.preventDefault(); var id_to_remove = $(this).attr('id'); });

Tu écoutes l'évenement click sur le bouton remove, tu récupère l'id à supprimer.
ensuite tu construit ta requête ajax et sql, et voilà . En pensant bien à envoyer le parametre id à ton script php.

Huggy, il y a 9 ans

Graph a fait une très bonne vidéo là dessus,
recherche "jquery on"

Mcolo Fils Hamam, il y a 9 ans

merci les amis