Conflit entre deux actions [Résolu]

[Mailgifson]

Bonjour à tous,

Voici mon problème, je n'arrive pas à m'en sortir :

Je construit un tableau HTML grâce à une Servlet/JSP. Ce tableau possède 5 colonnes, dont la dernière contient sur chacune des lignes un bouton qui permet de supprimer la ligne en question.

Deux actions sont possibles sur chacune des lignes :
- Un clic sur une ligne permet d'accéder à un niveau plus détaillé (je fais, en réalité, un appel d'une nouvelle Servlet/JSP).
- Un clic sur le bouton "Supprimer" de ma ligne, qui permet de supprimer ma ligne du tableau.

Mon problème est que lorsque j'appuie sur mon bouton, les deux actions sont appliquées : Le clic sur la ligne et le clic sur le bouton.

Voilà comment est géré le clic sur la ligne :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
			$(document).ready( function() {
				var oTable = $('#monTableau').dataTable( {
					"bJQueryUI": true,
					"sPaginationType": "full_numbers",
					"bSortClasses": false,
					"iDisplayLength": 50
				} );
 
				/* Gestion des évènements */
				$('#monTableau tbody tr').live('click', function () {
 
					var nTds = $( 'td', this );
				        alert( nTds );
					var sServeur = $(nTds[0]).text();
					var sDictionnaire = $(nTds[1]).text();
					var sRequete = $(nTds[2]).text();
 
					ListeDesPublications( sServeur, sDictionnaire, sRequete );
				} );
			} );

Voilà comment est géré le clic sur le bouton:

Code :

1
2
 
<th align=left><button onclick="SupprimerRequete('<%=idServeur%>','<%=idDictionnaire%>','<%=idRequete%>')">Supprimer toutes les publications de la requête : <%=idRequete%>.</button></th>

Comment ne pas appliquer ma fonction sur la ligne quand l'utilisateur appuie sur le bouton ?

[andry.aime]

Bonjour,

Utilise event.stopPropagation().

A+.

[Mailgifson]

J'ai ajouté un event.stopPropagation() sur le clic du bouton, mais ça ne change rien.

Comment être sûr qu'il exécute bien mon bouton avant le ('#monTableau tbody tr').live('click'... ?

[danielhagnoul]

Bonsoir

C'est le clic sur le bouton qui se propage dans le DOM et qui est repris par live(). En JavaScript, vous pouvez essayer la solution du return false : <th align=left><button onclick="SupprimerRequete('<%=idServeur%>','<%=idDictionnaire%>','<%=idRequete%>');return false">Supprimer toutes les publications de la requête : <%=idRequete%>.</button></th>.

[Mailgifson]

Non, ça ne fonctionne pas non plus

[danielhagnoul]

Bonsoir

Bizarre !

On peut voir un bout de la structure de votre table. Un bouton sur chaque ligne, mais dans un th ? C'est normal ?

Et le contenu de la fonction SupprimerRequete(). Cela déclenche-t-il une modification du contenu de la table.

On peut aussi travailler uniquement en jQuery. Essayer pour un seul bouton.

Remplacer :

Code :

<th align=left><button onclick="SupprimerRequete('<%=idServeur%>','<%=idDictionnaire%>','<%=idRequete%>')">Supprimer toutes les publications de la requête : <%=idRequete%>.</button></th>

Par :

Code :

1
2
3
4
5
<th align=left>
	<button class="btnClickClass" data-id-serveur="<%=idServeur%>" data-id-dictionnaire="<%=idDictionnaire%>" data-id-requete="<%=idRequete%>">
		Supprimer toutes les publications de la requête : <%=idRequete%>.
	</button>
</th>

Code jQuery :

Code :

1
2
3
4
5
6
7
$(".btnClickClass").click(function(){
	var obj = $(this);
 
	SupprimerRequete(obj.data("idServeur"), obj.data("idDictionnaire"), obj.data("idRequete"));
 
	return false;
});

[Mailgifson]

Nikel, ça fonctionne et en plus c'est plus propre au niveau du code.

Merci champion


Par contre, je ne comprends pas comment il arrive à faire la relation entre data-id-serveur="<%=idServeur%>" et obj.data("idServeur")


Pi : Le <th> c'était un essai

[danielhagnoul]

Bonsoir

C'est gérer par jQuery : http://api.jquery.com/data/

Les attributs "data-x" ou "data-x-y" ou "data-x-y-z" (se limiter à trois noms semble raisonnable) doivent être écrit en minuscule.

Ce type d'attribut vient du HTML5, mais ils sont gérés par jQuery depuis longtemps (1.2.3), mais la méthode d'écriture des attributs a été modifiée par la version 1.6

jQuery UI Mobile utilise intensivement ce type d'attribut.

Avec 1.6, pour accéder à l'attribut "data-un-exemple" on doit écrire $(sélecteur).data("unExemple").

Il y a des exemples d'utilisation dans la FAQ jQuery.

[Mailgifson]

Merci pour l'info