Submit, Form et portée des variables
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:
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:
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:
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? :cry:
Si c'est pas clair, pausé moi des questions.
Merci.
