Discussion :

[radjiv97441]

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

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

[Beginner.]

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

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

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"
 }];

[radjiv97441]

Merci, et comment je charge la fonction au départ ?

Code :

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

1
2
3
4
 
$(document).ready(function(){
...
});

Je mets quoi ?( le prototype ressemble à quoi ? )

[Beginner.]

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

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

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

[radjiv97441]

ça ne marche pas, en effet l'instruction

Code :

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

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 :

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

1
2
3
 
x=2;
t = function(x) { teturn x;}

ce n'est pas t(2).

[Watilin]

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 :

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

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 :

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

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 :

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

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 :

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

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

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

1
2
3
 
TypeError: params is undefined[En savoir plus]index.php:256:7
[object HTMLFormElement]::undefined

j'ai mis ça:

Code :

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

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 ?

[Invité]

Bonjour,

comme dirait la Mère Poularde :

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

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

Code html :

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

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

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

[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 !

[Invité]

Code :

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

$('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...

Sinon, une alternative est un attribut data :

Code html :

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

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

Code jQuery :

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

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.

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

[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

@radjiv97441,

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

Code :

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

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

[Beginner.]

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

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

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.

[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é

[Invité]

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

@radjiv97441,

Mais bon... Si tu veux continuer à tortiller du croupion...

[Watilin]

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.

[NoSmoking]

Bonjour,

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.