Discussion :

[yoshi84300]

Bonjour,

Je suis actuellement en train de travailler sur une application web de gestion de produits (c'est une base de données en somme).
Dans la partie administration, j'ai un référentiel permettant de paramétrer différentes informations nécessaires à l'usage de l'application (marques, revendeurs, utilisateurs, ...), se présentant chacun sous la forme d'un tableau.

Pour chaque donnée, j'ai créé deux liens : Supprimer et Editer. Derrière, il y a :

• href : #
• class = "remove brands value=X

Où les classes permettent de définir l'action à réaliser (remove ou edit), le type de référentiel (l'idée étant de mutualiser le traitement de ces deux liens avec les autres référentiels) et la valeur de l'élément.

Je voudrai, en cliquant sur un des liens, qu'un appel AJAX se fasse pour réaliser l'opération.
Cela fonctionne avec un des deux liens mais pas avec les deux.

Le code source gérant le lien de suppression :

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
 
jQuery(document).off().on('click', '.remove', function(event) {
	event.preventDefault();	// empèche le traitement standard (redirection vers la cible du lien)
 
	// lecture des classes
	var classes = jQuery(this).attr('class').split(" ");
	var tab = classes[2].split("=");	// lecture de la valeur
	var ref = tab[1];
	switch(classes[1]) {
		case 'brands':
			$.ajax({
				url: "index.php?page=admin&action=deleteBrand",
				type: "POST",
				data: ({
					brand_ref: ref
				}),
				dataType: "json",
				success: function(response) {
					updateGrid();	// mise à jour du tableau
				}
			});
			break;
		default:
			break;
	}
});

Sachant que j'ai eu le cas où plusieurs appels AJAX se faisait, j'ai dû rajouter le .off().

Au début, je me suis dit que je vais faire pareil que cette fonction juste en remplacant .remove par .edit (correspondant à la classe présente dans le lien d'édition) mais cette stratégie ne fonctionne pas et fait planter l'ensemble de la page.

Comment gérer deux évènements on click ?

Merci de votre aide

[ABCIWEB]

Au début, je me suis dit que je vais faire pareil que cette fonction juste en remplacant .remove par .edit (correspondant à la classe présente dans le lien d'édition) mais cette stratégie ne fonctionne pas et fait planter l'ensemble de la page.

Ben tu as dû te planter quelque part, mais sur le principe il n'y a aucune raison que cela ne fonctionne pas. Mais bon faudrait peut être aussi changer la destination de la requête ajax, les variables jointes dans la requête et sans doute aussi l'action en retour de requête (puisque "supprimer" et "éditer" n'ont pas les mêmes conséquences).

[MehrezLabidi]

tu peux mettre ce que tu veux dans la fonction .
un exemple ci dessous pour lancer deux actions différentes suite à un seul onclick.

Code :

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

1
2
3
4
5
6
7
8
9
10
 
     <script type="text/javascript">
                                        $(function (e) {
                                            $(".remove").click(function (e) {
                                                                    event.preventDefault();	
                                                                console.log('even 1');
                                                                alert(' event 2' );
 
                                        });
</script>

[yoshi84300]

Merci pour vos réponses

Ben tu as dû te planter quelque part, mais sur le principe il n'y a aucune raison que cela ne fonctionne pas. Mais bon faudrait peut être aussi changer la destination de la requête ajax, les variables jointes dans la requête et sans doute aussi l'action en retour de requête (puisque "supprimer" et "éditer" n'ont pas les mêmes conséquences).

Je suis d'accord, ce serai parfaitement logique mais il doit y avoir un truc qui bloque.

Pour info, chaque tableau est contenu dans une page distincte qui est appelé par un arbre. C'est le contrôleur qui inclus la page demandée.
Le tableau étant généré dynamiquement par le contrôleur.

Tu veux dire faire une fonction commune, lire la valeur de la classe et en fonction, faire un appel AJAX différent ? J'y est pensé mais quelle "balise" lire ?

[danielhagnoul]

Code :

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

1
2
$( "body" ).on( 'click', '.remove', function( event) { //... });
$( "body" ).on( 'click', '.edit', function( event) { //... });

Ce sont deux gestionnaires d'événements différents !

Le premier intercepte un événement "click" sur les éléments du DOM ayant la classe ".remove".
Le second intercepte un événement "click" sur les éléments du DOM ayant la classe ".edit".

Voir : Différences entre on() avec 1 ou 2 sélecteurs

Rien ne vous empêche de traiter les événements "click" dans la même fonction.

Code :

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

1
2
3
4
var clickHandler = function( ev ){ //votre code avec la transaction AJAX };
 
$( "body" ).on( 'click', '.remove', clickHandler );
$( "body" ).on( 'click', '.edit', clickHandler );

[yoshi84300]

Rien ne vous empêche de traiter les événements "click" dans la même fonction.

Code :

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

1
2
3
4
var clickHandler = function( ev ){ //votre code avec la transaction AJAX };
 
$( "body" ).on( 'click', '.remove', clickHandler );
$( "body" ).on( 'click', '.edit', clickHandler );

C'est grosso modo mon idée de base mais qui refuse de fonctionner. Après, le sélecteur jQuery porte sur le document et pas la balise body. Je vais essayer avec la balise.

[yoshi84300]

Bonjour,

J'ai essayé cette solution. Elle "marche" lors du premier clic mais fait planter le reste du script. Par exemple, je clique sur le lien d'édition tout va bien puis je clique sur le lien de suppression et le script plante
Edit : j'ai l'impression que c'est le dernier event on() qui prend la main sur l'autre event.



Une idée ?

Merci

[yoshi84300]

Bonsoir,

Problème résolu
J'ai fait une fonction commune à la suppression et à l'édition. La différence se fait par la classe présente dans le lien.

Le code :

Code :

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

1
2
3
4
5
6
 
jQuery("tbody").off().on('click', function(event) {
    if(($(event.target).hasClass('remove')) || ($(event.target).hasClass('edit'))) {
        // détection d'un lien de suppression ou d'édition pour bloquer le traitement standard, sinon c'est un lien classique
    }
});

Merci pour votre aide