Regrouper des fonctions

Version imprimable

Bonjour, je cherche une solution propre et condensée pour écrire les répétitions:

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
27
28
29
30
31
 
$("#id1").submit(function(e){ 
    e.preventDefault(); 
    $(document).ajaxStart(function() {
    $("#reponse1").css({ 'color': "black" });
    $('#reponse1').text('Transaction en cours ...');});
    var donnees = $(this).serialize(); 
    $.ajax({
    	type: "POST",
    	url: "ajax_guide.php",
    	data: donnees,
    	dataType: "text",
    	success: function(data) {$("#reponse1").css({ 'color': "red" });$('#reponse1').text(data);},
    	error: function() {$("#reponse1").css({ 'color': "red" });$('#reponse1').text('Une erreur est survenue');}
    });
});
$("#nomform").submit(function(e){ 
    e.preventDefault(); 
    $(document).ajaxStart(function() {
    $("#cible").css({ 'color': "black" });
    $('#cible').text('Transaction en cours ...');});
    var donnees = $(this).serialize(); 
    $.ajax({
    	type: "POST",
    	url: "ajax_article.php",
    	data: donnees,
    	dataType: "text",
    	success: function(data) {$("#cible").css({ 'color': "red" });$('#cible').text(data);},
    	error: function() {$("#cible").css({ 'color': "red" });$('#cible').text('Une erreur est survenue');}
    });
});

Ainsi de suite ...
Les fonctions sont toutes identiques seul trois paramettres diffèrent : id du formulaire, id du div attaché, nom du fichier ajax.
(on peut par exemple passer un tableau de l'ensemble des noms en paramettre)
Vous avez une solution ?
Merci

Salut,

Je passerais un tableau d'objet (contenant les trois paramètres) en argument d'une fonction contenant une boucle pour parcourir tous les objets du tableau...

Le tableau serait comme ça (exemple avec trois éléments) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 var tab = [{ idForm: "#blabla", idDiv: "#blabla", nameFile: "blabla" }, { idForm: "#blabla", idDiv: "#blabla", nameFile: "blabla" }, { idForm: "#blabla", idDiv: "#blabla", nameFile: "blabla" }];

20/01/2018, 14h36
radjiv97441
Merci, et comment je charge la fonction au départ ?
Code:

1 2 3 4 $(document).ready(function(){ ... });
Je mets quoi ?( le prototype ressemble à quoi ? )

Ben je ne connais pas JQuery et en plus je ne peux pas tester...

Je ne suis pas sûr mais essais ça :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
 
function regroup(tab) {
 
     let idForm, idDivA, nameFileA;
 
     for (let i = 0, l = tab.length; i < l; i++) {
 
         idForm = tab[i].idForm;
         idDivA = tab[i].idDiv;
         nameFileA = tab[i].nameFile;
 
         $(idForm).submit(function (e, idDivA, nameFileA) {
             e.preventDefault();
             let idDiv = idDivA;
             let nameFile = nameFileA;
 
 
             $(document).ajaxStart(function () {
                 $(idDiv).css({
                     'color': "black"
                 });
                 $(idDiv).text('Transaction en cours ...');
             });
             var donnees = $(this).serialize();
             $.ajax({
                 type: "POST",
                 url: nameFile,
                 data: donnees,
                 dataType: "text",
                 success: function (data) {
                     $(idDiv).css({
                         'color': "red"
                     });
                     $(idDiv).text(data);
                 },
                 error: function () {
                     $(idDiv).css({
                         'color': "red"
                     });
                     $(idDiv).text('Une erreur est survenue');
                 }
             });
         });
     }
 }

La fonction reçoit en argument tab (le tableau mentionné dans le message précédent)...

Je suis curieux de savoir si ça fonctionne...

20/01/2018, 18h42
radjiv97441
ça ne marche pas, en effet l'instruction
Code:

1 2 $(idForm).submit(function (e, idDivA, nameFileA) {
n'est pas executée tout de suite, c'est un déclencheur et e, idDivA, nameFileA sont des noms de paramètres d'entrées,
à ce stade les paramètres n'ont pas de valeur, c'est comme si on créait:
Code:

1 2 3 x=2; t = function(x) { teturn x;}
ce n'est pas t(2).

Dans la mesure où l’évènement submit bouillonne, tu peux aussi déléguer la gestion de l’évènement au plus proche parent, ou dans le doute, au document tout entier.
Je reprendrais alors le premier code proposé par Beginner, mais en utilisant une map plutôt qu’un tableau, ce qui nous permet d’utiliser les id des formulaires comme clés pour accéder aux paramètres.
Code:

1 2 3 4 5 var map = new Map([ [ "id1", { idDiv: "reponse1", nameFile: "ajax_guide.php" } ], [ "nomForm", { idDiv: "cible", nameFile: "ajax_article.php" } ], // etc. ]);
Ça s’utilise comme ceci :
Code:

1 2 3 4 5 map.get("id1") // { idDiv: "reponse1", nameFile: "ajax_guide.php" } map.get("id1").idDiv // "reponse1"
À présent, voyons le gestionnaire d’évènement.
Code:

1 2 3 4 5 6 7 8 $(document).submit(function (event) { var form = event.target; var params = map.get(form.id); console.log(params); // ... });
On utilise event.target et non plus this pour accéder au formulaire qui est effectivement la cible du submit. Et ensuite on utilise son id pour obtenir les paramètres contenus dans la map. Le console.log est là pour s’assurer que tout se passe bien (rappel : la console s’ouvre avec la touche F12).

Ne reste plus qu’à recopier ton code en substituant les valeurs en dur par les paramètres de la map. Je me suis permis de le reformater et de factoriser la variable $div, mais il fonctionne toujours de la même façon.
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 27 28 29 30 31 32 33 34 35 36 var map = new Map([ [ "id1", { idDiv: "reponse1", nameFile: "ajax_guide.php" } ], [ "nomForm", { idDiv: "cible", nameFile: "ajax_article.php" } ], // etc. ]); $(document).submit(function (event) { event.preventDefault(); var form = event.target; var params = map.get(form.id); console.log(params); var $div = $("#" + params.idDiv); $(document).ajaxStart(function () { $div.css({ "color": "black" }); $div.text("Transaction en cours…"); }); var donnees = $(form).serialize(); $.ajax({ method : "POST", url : params.nameFile, data : donnees, dataType : "text", success : function (data) { $div.css({ "color": "red" }); $div.text(data); }, error : function () { $div.css({ "color": "red" }); $div.text("Une erreur est survenue"); } }); });

21/01/2018, 05h46
radjiv97441
Merci, la solution marche sur une page, mais si je cherche à généraliser à toutes mes pages (dans un js unique pour toutes les pages), j'ai ce type d'erreur
Code:

1 2 3 TypeError: params is undefined[En savoir plus]index.php:256:7 [object HTMLFormElement]::undefined
j'ai mis ça:
Code:

1 2 onsole.log(form+"::"+params);
A mon avis cette fonction était appelée pour la connexion, donc il faut tester si form est un élément de map ?

Bonjour,

comme dirait la Mère Poularde :

Citation:

"Pas la peine de tortiller du croupion pour ch... droit !"

:aie:

Pour peu qu'on écrive la balise <form> avec les attributs nécessaires :
Code:

1 2 3 4 5 6 7 8 9 <form id="form1" method="post" action="ajax_file1.php" class="isajax"> <input type="submit" value="ok1" /> </form> <div id="form1target"></div> <form id="form2" method="post" action="ajax_file2.php" class="isajax"> <input type="submit" value="ok2" /> </form> <div id="form2target"></div>
Notez que :

la classe "isajax" permet de savoir si ce formulaire doit être traiter avec Ajax ou pas (en cas de plusieurs formulaires sur la page, dont certains non traités via Ajax).
le div réponse a pour id celui du form + 'target' (ça évite d'utiliser un paramètre supplémentaire)
alternative : on peut aussi mettre un "data-target", par exemple
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 27 28 29 $('body').on('submit', 'form.isajax', function(e) { e.preventDefault(); var form_id = $(this).attr('id'); var form_target_id = '#' + form_id + 'target'; var ajax_type = $(this).attr('method')? $(this).attr('method') : 'post'; var ajax_url = $(this).attr('action')? $(this).attr('action') : ''; var ajax_data = $(this).serialize(); $(document).ajaxStart(function() { $(form_target_id).css({ color: "black" }); $(form_target_id).text("Transaction en cours ..."); }); $.ajax({ type: ajax_type, url: ajax_url, data: ajax_data, dataType: "text", success: function(data) { $(form_target_id).css({ color: "green" }); $(form_target_id).text(data); }, error: function() { $(form_target_id).css({ color: "red" }); $(form_target_id).text("Une erreur est survenue"); } }); });
Explication de $('body').on('submit', 'form', function(e) { :
On "accroche" l'action au "body", qui est forcément présent dans le DOM au départ.
Le script fonctionnera donc AUSSI avec un formulaire créé via Ajax (et non présent dans le DOM au départ).

[EDIT Reste le cas du dataType: "text" (on peut avoir 'text' 'html' 'json',...) : on peut ajouter un attribut data-datatype dans la balise <form>

21/01/2018, 11h53
radjiv97441

Merci mais un gros hic persiste,
sur form j'ai déjà des classes (pas toutes identiques ou surchargées) et si je surcharge avec isajax cela ne passe pas (la fonction n'est pas appelée)
et de plus avec jquery mobile dans certaine condition meme si la classe est vide ou pas, à l'execution elle est remplit par plein de chose automatiquement.
Il faut un hidden isajax ?si on met form, il y aura alors un écouteur sur tout les form, il risque d'avoir conflit !

Code:

$('body').on('submit', 'form.isajax', function(e) {

'form.isajax' : aucun conflit. Uniquement ceux qui ont la classe "isajax."
(la classe "isajax" ne sert pas à la stylisation CSS)

Et on peut avoir plusieurs classes sur un même élément.
Je ne vois pas le souci... :koi:

Sinon, une alternative est un attribut data :

Code:

<form ...... data-isajax="1">
Code:

1 2 3 4 5 6 7 8 9 $('body').on('submit', 'form', function(e) { var form_id = $(this).attr('id'); var is_ajax = $(this).data('isajax')? $(this).data('isajax') : 0; if( is_ajax ) // oui, traitement Ajax { e.preventDefault(); ..... } // sinon, rien ici });
Là, on parcours en effet tous les form.
Mais on ne fait un traitement QUE s'il ont l'attribut data-isajax.

Citation:

...et si je surcharge avec isajax cela ne passe pas (la fonction n'est pas appelée)...

Si tu ne montres pas un exemple de code, on ne peut rien dire de plus.

21/01/2018, 12h36
Watilin
Bien joué @jreaux62, c’est propre. Effectivement, on n’a pas besoin de se compliquer la vie avec une map de la mère poularde :P

@radjiv97441,

Non, form est une variable locale à la fonction que j’ai déclarée.
Code:

1 2 3 4 $(document).submit(function (event) { var form = event.target; // ... });
Et map est une variable globale.

Ta question me fait penser que tu pourrais avoir besoin de voir ou revoir les bases de la portée des variables en JS. Voir ce cours ;)

Citation:

Envoyé par radjiv97441

n'est pas executée tout de suite, c'est un déclencheur et e, idDivA, nameFileA sont des noms de paramètres d'entrées,
à ce stade les paramètres n'ont pas de valeur,..

Ah ok...
Tu as reçu de meilleures réponses mais par curiosité j'aimerais bien savoir si cela fonctionne sans les paramètres, comme ça :

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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function regroup(tab) {   
 
    for (let i = 0, l = tab.length; i < l; i++) {
 
        let idForm = tab[i].idForm;      
 
        $(idForm).submit(function (e) {
            e.preventDefault();
            let idDiv = tab[i].idDiv;
            let nameFile = tab[i].nameFile;
 
            $(document).ajaxStart(function () {
                $(idDiv).css({
                    'color': "black"
                });
                $(idDiv).text('Transaction en cours ...');
            });
            var donnees = $(this).serialize();
            $.ajax({
                type: "POST",
                url: nameFile,
                data: donnees,
                dataType: "text",
                success: function (data) {
                    $(idDiv).css({
                        'color': "red"
                    });
                    $(idDiv).text(data);
                },
                error: function () {
                    $(idDiv).css({
                        'color': "red"
                    });
                    $(idDiv).text('Une erreur est survenue');
                }
            });
        });
    }
}

Citation:

Envoyé par Watilin

Ta question me fait penser que tu pourrais avoir besoin de voir ou revoir les bases de la portée des variables en JS. Voir ce cours ;)

Je prends aussi ! Merci.

21/01/2018, 15h56
radjiv97441

Dreamweaver ne veut pas compiler le mot clé: let
bon je continue

(map mot clé réservé)
map1.size
map1[i] is undefined il faudrait utiliser get, mais c'est par mot clé
21/01/2018, 16h38
Invité

Citation:

Envoyé par Watilin

Bien joué @jreaux62, c’est propre.
Effectivement, on n’a pas besoin de se compliquer la vie avec une map de la mère poularde :P

@radjiv97441,

Mais bon... Si tu veux continuer à tortiller du croupion... :roll:
23/01/2018, 01h25
Watilin

Citation:

Envoyé par radjiv97441

Dreamweaver ne veut pas compiler le mot clé: let

Dreamweaver n’est pas à jour. let est défini dans la spécification EcmaScript 2015.
De plus, est-ce que DW est capable de générer du code jQuery ? Il me semble que non. Et quand bien même il le ferait, il produirait du code à la fois peu efficace et difficile à maintenir. Parce que c’est ce qu’il fait toujours.

Il faut juste arrêter de croire que c’est productif de générer du JavaScript avec DW.
23/01/2018, 15h56
NoSmoking

Bonjour,

Citation:

Il faut juste arrêter de croire que c’est productif de générer du JavaScript avec DW.

oui mais dans Dreamweaver il y a Dream.
:dehors: