Submit, Form et portée des variables

**Snooky68** · 27/09/2012, 14h10

Bonjour à tous,

Je suis pas mal débutant en javascript, et je croit que certaine choses m'échappe!

Ma problématique:
En HTML j'ai un formulaire très classique:

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
<form action='/test/' method='POST' id='add_user' novalidate>
        <table>
            <tr><th><label for="id_username">Nom d'utilisateur:</label></th><td><input id="id_username" type="text" name="username" maxlength="30" /></td></tr>
<tr><th><label for="id_first_name">Prénom:</label></th><td><input id="id_first_name" type="text" name="first_name" maxlength="30" /></td></tr>
<tr><th><label for="id_last_name">Nom:</label></th><td><input id="id_last_name" type="text" name="last_name" maxlength="30" /></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input id="id_email" type="text" name="email" maxlength="75" /></td></tr>
            <tr>
                <td><hr/></td>
                <td><hr/></td>
            </tr>
            <tr><th><label for="id_clavier_virtuel">Clavier virtuel:</label></th><td><input type="checkbox" name="clavier_virtuel" id="id_clavier_virtuel" /></td></tr>
<tr><th><label for="id_array_nb_element">Nombre d'élément de tableau:</label></th><td><input type="text" name="array_nb_element" value="20" id="id_array_nb_element" /><br /><span class="helptext">Lors de l'affichage des tableaux, combien d'élément sont affiché sur une seul page?</span></td></tr>
<tr><th><label for="id_duree_rdv">Durée par défaut des nouveaux rendez-vous:</label></th><td><input type="text" name="duree_rdv" value="50" id="id_duree_rdv" /></td></tr>
<tr><th><label for="id_h_debut_calend">Début de journée:</label></th><td><input type="text" name="h_debut_calend" value="8" id="id_h_debut_calend" /><br /><span class="helptext">En heurs</span></td></tr>
<tr><th><label for="id_h_fin_calend">Fin de journée:</label></th><td><input type="text" name="h_fin_calend" value="19" id="id_h_fin_calend" /></td></tr>
<tr><th><label for="id_onglet_raccourci">Afficher l'onglet des raccourcies:</label></th><td><input checked="checked" type="checkbox" name="onglet_raccourci" id="id_onglet_raccourci" /></td></tr>
            <tr>
                <td></td>
                <td><input type='submit' value='send'/></td>
            <tr>
        </table>
    </form>

Ce dernier est générer par un framework!
J'aimerais transformer ce formulaire en ajax.
J'ai donc le code javascript suivant:

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
46
47
48
49
var ajaxForm = {
            init : function(obj, formvalid=false){
                /*Initialisation de l'objet form*/
                ajaxForm.that = obj;
                ajaxForm.formvalid = formvalid;
                ajaxForm.that.submit(ajaxForm.submit);  // submit
            },
            submit : function(e){
                /* Gestion de l'evenement submit avec envoi ajax */
                e.preventDefault(); //Annulation de l'action
 
                var values = {};
                $.each(ajaxForm.that.serializeArray(), function(i, field) {
                    values[field.name] = field.value;
                });
                $.post(ajaxForm.that[0].action, values, ajaxForm.success, 'json').error(ajaxForm.error); // post ajax sur url de action
            },
            display_error : function(e, error){
                /* Gestion des messages d'erreur */
                var $dd = $('#'+ajaxForm.that[0].id + ' #id_' + e);
                $dd.css('background-color', '#FF9966');
                parent = $dd.parent();
                parent.append($('<span></span>')
                        .addClass('formError')
                        .text(error)
                    );
            },
            success : function(data, textStatus, jqXHR){
                /* Retour ajax en cas de success */
                ajaxForm.that.find('span.formError').remove();// remove old error messages
                if(!jQuery.isEmptyObject(data)){   // Si renvoi des erreurs
                    var errors = data;
                    for (var e in errors){ // iterating errors
                        var error = errors[e][0];
                        ajaxForm.display_error(e, error);
                    }
                }else{                  // Traitement serveur OK
                    if(jQuery.isFunction(ajaxForm.formvalid)){      //Si une fonction "formvalid" est définie
                        return true
                    }
                }
            },
            error : function(jqXHR, textStatus, errorThrown){       // Erreur ajax
                alert('error: ' + textStatus + errorThrown);
            }
        };
        $(function(){
            ajaxForm.init($('#add_user'));
        });

Avec ce code, impossible d'avoir deux formulaires dans la même page! (logique) Le module reste "configuré" sur le dernier formulaire initialisé.
J'ai convertie ce module en objet, j'ai tenté d'utilisé des prototypes mais sans résultat!

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
 
var ajaxForm = function(){
            this.that = false;
            if( typeof ajaxForm.initialized == "undefined" ) { 
 
                ajaxForm.prototype.init = function(obj){
                    /*Initialisation de l'objet form*/
 
                    this.that = obj;
                    this.that.submit(function(e){
                        /* Gestion de l'evenement submit avec envoi ajax */
                        e.preventDefault(); //Annulation de l'action
 
                        var values = {};
                        $.each($('#'+this.id).serializeArray(), function(i, field) {
                            values[field.name] = field.value;
                        });
                        $.post(this.action, values, this.success, 'json').error(this.error); // post ajax sur url de action
                    });  // submit
                };
                ajaxForm.initialized = true; 
            }
 
            this.success = function(data, textStatus, jqXHR){
                /* Retour ajax en cas de success */
                this.that.find('span.formError').remove();// remove old error messages
                if(!jQuery.isEmptyObject(data)){   // Si renvoi des erreurs
                    var errors = data;
                    for (var e in errors){ // iterating errors
                        var error = errors[e][0];
                        this.display_error(e, error);
                    }
                }
            };
........

Je butte sur un problème:
A la ligne 18 "this.success" est executé dans l'espace du formulaire, et non de mon objet! J'ai pourtant besoin de faire appelle à mon "success".

Je suppose que se n'est pas possible, mais alors comment palier à ce problème en gardant un objet pour chaque formulaire?

Si c'est pas clair, pausé moi des questions.
Merci.

**marcbuils** · 27/09/2012, 21h51

Bonjour Snooky68,

Pour ton problème, je pense qu'en remplaçant la ligne 18 par les lignes suivantes, ça devrait résoudre ton problème:

Code :

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

1
2
3
4
5
 
var _this = this; // Copie la valeur courante du this dans une variable qui ne sera pas écrasée
$.post(this.action, values, function(data, textStatus, jqXHR){ 
  _this.success(data, textStatus, jqXHR); // appelle la fonction success de ton objet sauvegardé
}, 'json').error(this.error); // post ajax sur url de action

Sachant que tu développes avec jQuery, je te conseillerais plutôt de créer un plugin jquery sachant que c'est vraiment conçu pour répondre à ce genre de problématique.

Pour ton plugin, ça donnerait:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
// Code du plugin
;( function( $ ){
$.fn.ajaxForm = function( formvalid=false ){
  return this.each( function(){
    var ajaxForm = {
            init : function(obj, formvalid){
                /*Initialisation de l'objet form*/
                ajaxForm.that = obj;
                ajaxForm.formvalid = formvalid;
                ajaxForm.that.submit(ajaxForm.submit);  // submit
            },
            submit : function(e){
                /* Gestion de l'evenement submit avec envoi ajax */
                e.preventDefault(); //Annulation de l'action
 
                var values = {};
                $.each(ajaxForm.that.serializeArray(), function(i, field) {
                    values[field.name] = field.value;
                });
                $.post(ajaxForm.that[0].action, values, ajaxForm.success, 'json').error(ajaxForm.error); // post ajax sur url de action
            },
            display_error : function(e, error){
                /* Gestion des messages d'erreur */
                var $dd = $('#'+ajaxForm.that[0].id + ' #id_' + e);
                $dd.css('background-color', '#FF9966');
                parent = $dd.parent();
                parent.append($('<span></span>')
                        .addClass('formError')
                        .text(error)
                    );
            },
            success : function(data, textStatus, jqXHR){
                /* Retour ajax en cas de success */
                ajaxForm.that.find('span.formError').remove();// remove old error messages
                if(!jQuery.isEmptyObject(data)){   // Si renvoi des erreurs
                    var errors = data;
                    for (var e in errors){ // iterating errors
                        var error = errors[e][0];
                        ajaxForm.display_error(e, error);
                    }
                }else{                  // Traitement serveur OK
                    if(jQuery.isFunction(ajaxForm.formvalid)){      //Si une fonction "formvalid" est définie
                        return true
                    }
                }
            },
            error : function(jqXHR, textStatus, errorThrown){       // Erreur ajax
                alert('error: ' + textStatus + errorThrown);
            }
        };
 
        ajaxForm.init( $(this), formvalid );
  } );
 
  // Utilisation
  $('#form1').ajaxForm(); // Formulaire avec l'id form1
  $('#form2').ajaxForm(); // Formulaire avec l'id form1
  $('form').ajaxForm(); // Tous les Formulaires de la page
} )(jQuery);

**Snooky68** · 01/10/2012, 18h36

Salut marcbuils!

C'est parfait, je te remercie beaucoup!

Je n'est pas testé en remplaçant la ligne 18, je suis directement passer par le système de plugin jQuery (super façon de faire d'ailleur, je ne connaissait pas!)

Pour ceux qui cherche, voici ma solution:

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
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
(function($){
    $.fn.ajaxForm = function(formvalid){
        /* 
        plugin de transformation d'un formulaire en ajax 
        Formvalid est une fonction pour personnaliser l'après validation du form, l'objet form est transmit
        */
 
        var obj = false;
        var formvalid = formvalid;
 
        var display_error = function(e, error, obj){
            /* Gestion des messages d'erreur */
            var $dd = $('#'+obj[0].id + ' #id_' + e);
            $dd.css('background-color', '#FF9966');
            parent = $dd.parent();
            parent.append($('<span></span>')
                    .addClass('formError')
                    .text(error)
                );
        };
 
        var success = function(data, textStatus, jqXHR){
            /* Retour ajax en cas de success */
            obj.find('span.formError').remove();// remove old error messages
            if(!jQuery.isEmptyObject(data)){   // Si renvoi des erreurs
                var errors = data;
                for (var e in errors){ // iterating errors
                    var error = errors[e][0];
                    display_error(e, error, obj);
                }
            }else{                  // Traitement serveur OK
                if(jQuery.isFunction(formvalid)){      //Si une fonction "formvalid" est définie
                    formvalid(obj);
                }
            }
        };
 
        var error = function(jqXHR, textStatus, errorThrown){       // Erreur ajax
            alert('error: ' + textStatus + errorThrown);
        }
 
        var submit = function(e){
            e.preventDefault(); //Annulation de l'action
 
            var values = {};
            $.each(obj.serializeArray(), function(i, field) {
                values[field.name] = field.value;
            });
            $.post(obj[0].action, values, success, 'json').error(error); // post ajax sur url de action
        };
 
        return this.each( function(){
            obj = $(this);
            obj.submit(submit);
            return this;
        })
    }
}) (jQuery);
 
$(function(){
    $('#add_user')
        .ajaxForm(function(obj){
            console.log(obj);
        });
});

Merci pour l'astuce.

Submit, Form et portée des variables [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager