Discussion :

[lemirandais]

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 :

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

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 :

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
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.

[marcha]

Salut,

Quand tu utilises cette syntaxe: $("a.popo").click(...

JQuery va ajouter des écouteurs d'évènements à tous les liens a.popo,
il le fait par le biais de addEventListener sur tous les éléments du DOM
qui correspondent à a.popo

Quand tu recharge le div batiment, les éléments DOM qui avaient des
écouteurs d'évènements sont remplacés par de nouveaux éléments DOM
qui n'ont pas d'écouteurs d'évènements.

Pour solutionner ce problème, deux techniques sont courrament utilisées:

1) Réassigner les évènements après un chargement de fragment de page.

Pratiquement tu place le code contenant $("a.popo").click(... dans une
fonction initBatiment() que tu appelle au chargement de la page et aussi
après la mise à jour du div batiment.

Exemple:

Code :

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

1
2
 
$("#batiment1").load("./batiment.php", function() { initBatiment(); });

2) Tu utilises la délégation d'évènement, c'est à dire, au lieu d'assigner
le onclick à tes liens, tu l'assigne par ex. au body. Les évènements qui se produisent
sur des enfants du DOM remontent l'arborescence (bubbling) et son traitables
à tous les niveaux. Dans cette approche il faut différentier les évènements
de click sur les liens a.popo des autres clicks. Ceci se fait par event.target,
heureusement JQuery gère tout ça facilement avec la fonction live

[lemirandais]

Merci pour cette réponse très claire.

Bon je vais utiliser la premiere solution avec la création de fonction.
Donc en résumé, lors de l'affichage de la page batiment, je fais un onload="initbatiment()" sur la div "batiment" et ensuite, dans la fonction load, je met function() { initbatiment(); }

C'est bien cela?

[marcha]

Presque, on utilise pas onload (événement qui se produit quand la
page est complètement chargée, ressources comprises) car il survient
trop tard.

Avec JQuery on utilise la fonction $ Qui s'exécute quand le document
est prêt (même si toutes les images ne sont pas chargées)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$(function() {
	initBatiment();
});
 
function initBatiment() {
   $("a.popo").click(function() {
      ...
      $("#batiment1").load("./batiment.php", function() { initBatiment(); });
   });
};

Cependant je corrigerai $("a.popo") par $("#batiment1 a.popo")
en effet, si par la suite il y avait des liens de class popo ailleur dans la
page, $("a.popo") les sélectionnerait et il y aurait plusieurs gestionnaire
d'évènement onclick par lien, ce qui provoquera des effets indésirables.

Pour être plus rigoureux encore, je préfère travailler ainsi:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(function() {
	initBatiment(document.body); // première initialisation, concerne toute la page
});
 
function initBatiment(context) {
   $("a.popo", context).click(function() {
      ...
      // initialisation partielle de la partie du DOM que l'on a chargé.
      $("#batiment1").load("./batiment.php", function() { initBatiment($("#batiment1")); });
   });
};

[lemirandais]

Merci sa marche a 100% comme je le voulais.

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
19
20
21
22
23
24
25
26
$(function() {
	initBatiment(document.body); // première initialisation, concerne toute la page
});
function initBatiment(context) {
	$("#batiment a.popo").click(function(event) {
  			event.preventDefault(); // empêche le traitement par défaut de l'évenement
		});
   $("#batiment a.popo", context).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();
				}
			});
		    // initialisation partielle de la partie du DOM que l'on a chargé.
      		$("#batiment1").load("./batiment.php #batiment", function() { initBatiment($("#batiment1")); });
			//alert('suppression de'+$(this).attr('numero'));
		}
   });
};

Je te remercie énormément.

Pour la class popo, je vais la rebaptiser car il s'agissait que d'une variable test. Je vais les changer partout et le tour est joué.
Merci beaucoup.