Deux événements jQuery .on() sur la même page

Version imprimable

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:

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 :)

15/08/2016, 18h05
ABCIWEB

Citation:

Envoyé par yoshi84300

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

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:

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>

16/08/2016, 09h57
yoshi84300

Merci pour vos réponses ;)

Citation:

Envoyé par ABCIWEB

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

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 ?
16/08/2016, 20h58
danielhagnoul
Code:

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:

1 2 3 4 var clickHandler = function( ev ){ //votre code avec la transaction AJAX }; $( "body" ).on( 'click', '.remove', clickHandler ); $( "body" ).on( 'click', '.edit', clickHandler );
18/08/2016, 09h29
yoshi84300
Citation:
Envoyé par danielhagnoul

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

Code:

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.
30/08/2016, 19h01
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 :weird:
Edit : j'ai l'impression que c'est le dernier event on() qui prend la main sur l'autre event.

Une idée ?

Merci :)

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:

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 ;)