Ajax me donne une réponse incorrecte

**Lprofessionnelle** · 12/06/2014, 17h55

Bonjour, j'aimerais votre avis sur un problème.

J'inclus un formulaire grâce à une requête ajax. Ensuite quand mon input perd le focus, j'affiche une liste de suggestion, car tout nom doit être unique et une petite verif an ajax pour voir si le nom est en BDD et si tout est ok j'affiche le bouton d'envoi. C'est juste une sécurité pour pas envoyé le formulaire pour rien.

Donc logiquement, on peut envoyer le formulaire seulement si le bouton d'envoi c'est affiché, car le nom est pas en BDD et pourtant la plupart du temps j'ai la réponse inverse: déja présent en BDD.

Mon code PHP fonctionne, pour moi la seul raison possible: le formulaire est envoyé plusieurs fois ou ma page est appelé un peut avant et donc forcément à la fin elle répond que le nom y est déjà.

Mon code PHP d'ajout en BDD:

Code php :

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
 
<?php
// <[@]>
session_start();
ini_set('display_errors', 1);
error_reporting(E_ALL); 
date_default_timezone_set ('Europe/Paris');
 
// header("Access-Control-Allow-Origin: *");
 
$patch_include_class = "../../../boite_a_outils/class";
include $patch_include_class."/loader_class.php";
 
// _POST
	if(!empty($_GET['nom']))
		{
$bdd = sql_extends::connexion_bdd('liste');
$array_sql = array(
				'nom' => $_GET['nom'], 
			); 
 
$stmt = $bdd->prepare("SELECT * FROM `liste_nom` WHERE nom = :nom LIMIT 1");
$stmt->execute($array_sql);
$stmt->setFetchMode(PDO::FETCH_ASSOC);
$donnees = $stmt->fetch();
 
			if(!empty($donnees['nom'])) // déja en BDD
				{
$array['statut'] = 1;
$array['nom'] = $_GET['nom'];
				}
			else // On ajoute
				{
$requete_sql = "INSERT INTO `liste`.`liste_nom` (`nom`) VALUES (:nom);";
$req = $bdd->prepare($requete_sql);
$req->execute($array_sql);
$array['statut'] = 2;
				}
		}
	else // Erreur
		{
$array['statut'] = 3;
		}
echo json_encode($array);

Le code JS:

Code js :

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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
 
// Quand l'input perd le focus:
function envoie_form() {
	$('.search').blur(function(){
		nom_search = $(this).val(); // Valeur de l'input
		$('.search').css('color','#000');
		$(".suggestions").html("");
		$("#form_ajout_reponse").removeClass().addClass("message_defaut").fadeIn(2000).html('<img src="'+ $global.loader_image +'" title="Chargement..." alt="Chargement...">&nbsp;Chargement...');
		setTimeout(function() {
		if(nom_search == '' || nom_search.length < 2) // on vérifie si le formulaire n'est pas vide, et s'il contient au moins 2 caractères
			{
				$('.search').css('background-color','#CC0000'); // On change la couleur
				$(".suggestions").html("");
				$('#form_ajout_reponse').removeClass().addClass("message_indisponible").html('Le nom contient moins de 2 caractères');
				return false;
			}
		else
			{
				// On affiche des suggestionss:
				$(".suggestions").addClass("message_defaut").fadeIn(2000).html('<img src="'+ $global.loader_image +'" title="Chargement..." alt="Chargement...">&nbsp;Chargement... suggestions');
				$.ajax({
					url: 'include/autocomplete_liste_nom.php',
					type: 'GET',
					timeout: 5000, // Après 5 seconde on arrête si c'est trop long
					dataType: 'json',
					data: {'query': nom_search},
					success: function(json) {
						taille = json.length;
						$(".suggestions").removeClass("message_defaut").html('');
						if(json.reponse == 1)
							{
								// $(".test").html("1 - nom: "+nom_search+" - reponse: "+json.reponse+"<br>\n");
								$(json.suggestions).each(function(key, value ){
									$(".suggestions").append('<li>'+value+'</li>');
								});	
							}
						else
							{
								// $(".test").html("2 - nom: "+nom_search+" - reponse: "+json.length+"<br>\n");
								$(".suggestions").html('<li><i>Pas de proposition</i></li>');
							}
					},
					error: function(XMLHttpRequest,textStatus, errorThrown){
						$(".suggestions").html('erreur');
					}
				});	
				// On affiche des suggestionss fin
 
				// On verifie le nom:
				$.ajax({
					type: 'POST',
					url: 'include/verif_nom.php',
					dataType: 'json',
					timeout: 5000, // Après 5 seconde on arrête si c'est trop long
					data: {'nom' : nom_search},
					success: function(json) {
						if(json.reponse == 1)
							{
								$('.search').css({'color': '#000', 'background-color': '#F7CBCA'});
								$('#form_ajout_submit').css('display', 'none');
								$("#form_ajout_reponse").removeClass().addClass("message_indisponible"); // On ajoute la class au divau div
								$("#form_ajout_reponse").html('1- Réponse: Nom déja utilisé');
								$(".suggestions").html('');
							}
						else if(json.reponse == 2)
							{
								$('#form_ajout_submit').css('display', 'block');
								$('#form_ajout_reponse').removeClass().addClass("message_disponible").html('Réponse: Nom disponible');
 
								$(".form_ajout").submit(function(){
									$('#form_ajout_submit').css('display', 'none');
									$("#form_ajout_reponse").removeClass().addClass("message_defaut").fadeIn(2000).html('<img src="'+ $global.loader_image +'" title="Chargement..." alt="Chargement...">&nbsp;Chargement...');
									$.ajax({
										url: $(this).attr('action'),
										type: $(this).attr('method'),
										data: {'nom' : nom_search},
										dataType: 'json',
										timeout: 5000, // Après 5 seconde on arrête si c'est trop long
										success: function(json_form) {
											 if(json_form.statut == 1)
												{
													$("#form_ajout_reponse").removeClass().addClass("message_indisponible").html('2- Réponse serveur: Nom déja utilisé - '+nom_search);
												}
											else if(json_form.statut == 2)
												{
													$("#form_ajout_reponse").removeClass().addClass("message_disponible").html('Réponse serveur: Ajout en BDD');
													$(".suggestions").html('');
												}
 
											else if(json_form.statut == 3)
												{
													$('#form_ajout_submit').css('display', 'none');
													$('#form_ajout_reponse').removeClass().addClass("message_indisponible").html('Réponse serveur: paramètre manquant');
													$(".suggestions").html('');
												}	
											else
												{
													$('#form_ajout_submit').css('display', 'none');
													$('#form_ajout_reponse').html('Réponse serveur: ERREUR');
													$(".suggestions").html('');
												}
										},
										error: function(XMLHttpRequest,textStatus, errorThrown){
											$("#form_ajout_reponse").html('erreur');
										}
									});
									return false;
								});
								return false;
							}
						else
							{
								$('#form_ajout_submit').css('display', 'none');
								$("#form_ajout_reponse").removeClass().addClass("message_indisponible"); // On ajoute la class au divau div
								$("#form_ajout_reponse").html('Réponse: ERREUR paramètre manquant - '+json.reponse);
							}
					},
					error: function(XMLHttpRequest,textStatus, errorThrown){
						$("#form_ajout_reponse").html('erreur');
					}
				});
				// On verifie le nom fin
				return false;
			}
		}, 1000);
		return false;
	});
	// return false;
}
// Quand l'input perd le focus fin
 
// Gestion formualires:
	$('a#lien').click(function() {
		// var loader_image = "http://data.simonbhb.fr/images/loader.gif";
		$( "#form_div" ).addClass("texte"); // On ajoute la class au div
		$('#form_div').fadeIn(2000).html('<img src="'+ $global.loader_image +'" title="Chargement..." alt="Chargement...">&nbsp;Chargement...');
		form_url = $(this).attr("href");
 
		$('a#lien').css('font-weight', '');
		$(this).css('font-weight', 'bold');
 
		$.ajax({
			url: 'include/form/'+form_url,
			type: 'GET',
			timeout: 5000,
			dataType: 'html',
			success: function(donnees) {
				$('#form_div').html('<b>Lien cliqué:</b> '+form_url+'<br><b>Contenu du fichier:</b><br>'+donnees);		
				envoie_form();
				fermer_formulaire('#form_div');
			},
			error: function() {
				$('#form_div').html('Une erreur c\'est produite: formulaire introuvable<br><a href="#" id="fermer">Fermer le formulaire</a>');
				fermer_formulaire('#form_div');
			}
		});
		return false;
	});
// Gestion formulaires fin

Si quelqu'un sait d'ou vient le bug, merci

**danielhagnoul** · 14/06/2014, 10h25

Bonjour

Code :

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

1
2
3
function envoie_form() {
    $('.search').blur( ... )
}

Erreur classique : le gestionnaire d'événement est dans une fonction !

À chaque appel de la fonction, vous ajoutez un nouveau gestionnaire d'événement !

Pour déclencher le gestionnaire d'événement depuis JS : $( selector ).trigger(" blur" );.

**Lprofessionnelle** · 14/06/2014, 18h21

Question d'un inculte: donc en gros le formulaire est donc bien exécuté plusieurs fois ?
Comment je fais la modif ? c'est pas comme sur ton exemple

**danielhagnoul** · 16/06/2014, 10h01

Si lors de la transaction AJAX, le code de $('.search').blur( ... ) est exécuté plus d'une fois vous savez maintenant pourquoi.

c'est pas comme sur ton exemple

Code :

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

1
2
3
function envoie_form() {
    $('.search').blur( ... )
}

C'est le code contenu dans votre premier message.

Comment je fais la modif ?

Ne jamais inclure un gestionnaire d'événement dans une fonction.
Pour déclencher un événement à partir du code on utilise la méthode trigger().

J'avais déjà dit tout cela dans le message précédent, je ne vois pas ce que je peux y ajouter.

**Lprofessionnelle** · 18/06/2014, 21h55

J'ai comprit, ce que je n'ai pas comprit c'est comment utilisé cette méthode à mon code pour résoudre le bug.
J'ai essayé, mais ça ne change rien, j'ai toujours le message comme quoi il existe déja alors que je viens de l'ajouter:

Code :

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

1
2
3
4
5
6
 
function envoie_form() {
	$('.search').blur(function(){
		// Mon code
	}).trigger('blur');
}

Si j'ai mit ce code dans une fonction c'était pour séparer un peut le code pour pas qu'il devienne trop complexe

**Lprofessionnelle** · 24/06/2014, 20h51

Donc, j'utilise trigger maintenant par exemple pour effectuer quelque chose automatiquement(pour afficher la première VDM aléatoire toute seul) puis au nouveau click j'en ré-affiche une, mais comment faire pour que ça fonctionne quand le lien est réaffiché en JS ? En gros ça fonctionne seulement si je lien est déja sur la page, j'ai pas réussi à régler ça.

Pour le gestionnaire d'événement je peux faire comme ç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
 
<a href="#" id="test_2">Lien</a>
<div id="ele"></div>
<script>
$(function() {
   function test(id)
   {
      $('#ele').html(id);
   }
 
   $('a#test_2').click(function()
   {
       test( $(this).attr('id') );
   });	
 
});
</script>

Mais je ne sais pas comment procéder avec mon code pour gérer mon formulaire, car le gestionnaire d’événement c'est pas dans la fonction

Ajax me donne une réponse incorrecte

jQuery

Vue hybride

Discussions similaires

Partager

Partager