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.