jquery fonction load() ne marche pas comme voulu
Bonjour à tous.
Voila je suis en train de faire une application dans laquelle je traite le cas de la suppression de certains élements: dans mon cas, il s'agit de batiment.
Sur ma page, par defaut j'ai un tableau générer en php qui liste les batiments, leurs adresses, ... et dans lequel je peux modifier leur contenu ou supprimer cette structure.
Afin de rendre un peu plus simple et convivial l'interface, j'utilise jquery. Jusque là pas de mal. Cependant, j'ai un problème, lorsque je clique sur supprimer, ce dernier possède un identifiant du type: <a href="supprimer.php?id=3" >Supprimer ce batiment</a>. Le traitement se fait par le biais de jquery. J'ai donc dans un premier temps bloquer l'évènement du lien. Dans un second temps, je fais une demande de confirmation pour la suppression puis le traitement. Jusque là pas de problème. La seule chose que je souhaite est qu'une fois la suppression, réactualisé le div contenant le listing des batiments.
Après multe et multe recherche, j'ai trouvé que l'élément load qui permet d'actualiser le div désirer.
Le problème vient de l'actualisation effectué par load. Je m'explique avec un scénario, sa sera plus simple:
Je clique sur supprimer le premier batiment, je confirme et l'actualisation fonctionne c'est-à-dire que le batiment identiqué n'est plus lisible. Si maintenant je veux suprimer un second batiment, la suppression s'effectue mais sans traitement jquery.
En gros, l'actualisation supprime l'évènement bloquant de l'action <a>
Je met quelque code pour vous montrer ce que j'ai fait.
Code:
1
2
3
4
5
6
7
8
9
10
11
|
<div id="batiment1">
<div id="batiment">
<table border="1" cellpadding="0" cellspacing="0" width="1000px">
<tr><td width="15%">Aperçu du bâtiment</td></td><td width="25%">Nom du bâtiment</td><td width="25%">Adresse du bâtiment</td><td width="25%">Classification erp</td><td width="5%">Modifier</td><td width="5%">Supprimer</td></tr>
<tr><td><img src="sources/image_39.JPG" /></td><td>poiuytre</td><td>kp^piougyfyghuj</td><td>drfytugihoj</td><td align="center"><img src="img/edit.jpg" border="0" width="36px" height="36px"alt="modifier" title="modifier"/></td><td align="center"><a href="supprimerbatiment.php?id=39" numero='39' class="popo"><img src="img/sup.jpg" border="0" width="36px" height="36px"alt="supprimer" title="supprimer"/></a></td></tr>
<tr><td><img src="sources/image_40.JPG" /></td><td>oiuuouio</td><td>ioipoioiop</td><td>uopiop</td><td align="center"><img src="img/edit.jpg" border="0" width="36px" height="36px"alt="modifier" title="modifier"/></td><td align="center"><a href="supprimerbatiment.php?id=40" numero='40' class="popo"><img src="img/sup.jpg" border="0" width="36px" height="36px"alt="supprimer" title="supprimer"/></a></td></tr>
</table>
</div>
</div> |
et mon code jquery
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
$("a.popo").click(function() {
if(confirm("Êtes-vous sur de vouloir supprimer ceci?"))
{
var str= 'id='+$(this).attr('numero');
$.ajax({
url: 'supprimerbatiment.php',
type: 'GET',
data: str,
success: function (data)
{
//$("#myform").hide();
}
});
$("#batiment1").load("./batiment.php #batiment" );
//alert('suppression de'+$(this).attr('numero'));
}
else
{
$("#batiment1").load("./batiment.php #batiment" );
}
}); |
Je reste à votre disposition si vous n'avez pas tout compris.
