[AJAX] ajax et alert dans fonction ?

**barbuslex** · 22/11/2010, 10h39

Salut,

Alors voilà j'ai un problème peut être bête pour certains mais c'est entrain de me rendre dingue et je ne comprend pas pourquoi

Tout d'abord voici mon code javascript concerné :

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
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
function re_test(cr)
{
	var valeur_cr = cr.options[0].getAttribute('value');
	alert(valeur_cr);
	if(valeur_cr != '0000')
		demande('UF', cr, document.getElementById('req_uf'));	
	return false;
}
 
function test_pole(pole)
{
	var i = 0;
	if(pole.options[pole.selectedIndex].value != '0000')  
	{ 
		var cr = document.getElementById('req_cr');
		demande('CR', pole ,document.getElementById('req_cr')); 
		return true;
	} 
	else 
	{ 
		document.getElementById('req_cr').innerHTML = null; 
		document.getElementById('req_cr').style.display = 'none'; 
		document.getElementById('req_uf').innerHTML = null; 
		document.getElementById('req_uf').style.display = 'none'; 
		return false;
	}	
}
 
function demande(type, choix, liste2)
{
	var valeur = choix.options[choix.selectedIndex].value;
	var xhr = getXHR();
 
 
 
	xhr.onreadystatechange = function() 
	{
		if(xhr.readyState == 4 && (xhr.status === 200 || xhr.status == 0))
		{
			if(type == 'CR')
			{
				document.getElementById('req_uf').innerHTML= "";
				document.getElementById('req_uf').style.display = "none";
			}
			if((type == 'UF') && (valeur == '0000'))
			{
				document.getElementById('req_uf').innerHTML = "";
				document.getElementById('req_uf').style.display = "none";
				return false;
			}
			liste2.style.display = "inline";
			lireResultat(xhr.responseXML, liste2);
		}
		else
		{
			liste2.style.display = "none";
		}
	};
 
	xhr.open("GET", "listes.php?liste1="+valeur+"&type="+type, true);
	//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(null);
	return true;
}
 
function lireResultat(reponse, liste2)
{
	liste2.innerHTML=null;
	var nodes = reponse.getElementsByTagName("item");
	var oOption, oInner, i, c=nodes.length;
	liste2.innerHtml = "";
 
	for(i=0; i<c; i++)
	{
		oOption = document.createElement("option");
		if(nodes[i].getAttribute("id") == '0000')
		{
			oInner = document.createTextNode(" ");
		}
		else
		{
			oInner = document.createTextNode(nodes[i].getAttribute("id") + " - " +nodes[i].getAttribute("name"));
		}
		oOption.setAttribute('value',nodes[i].getAttribute("id"));
 
		oOption.appendChild(oInner);
		liste2.appendChild(oOption);
	}
	return false;
 
}

J'appel ma fonction comme ceci :

Code :

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

<select id="req_pole" name="req_pole" onchange="if(test_pole(this)) re_test(document.getElementById('req_cr')); " >

Or ici il s'agit de simples listes liées mais lorsque je l'exécute cela ne fonctionne pas...

Par contre si je met un alert("toto") dans la fonction re_test() cela fonctionne. Je ne comprend vraiment pas pourquoi ???

Le code qui fonctionne est celui ci :

Code :

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

1
2
3
4
5
6
7
8
9
function re_test(cr)
{
alert("toto"); <=== ICI
	var valeur_cr = cr.options[0].getAttribute('value');
	alert(valeur_cr);
	if(valeur_cr != '0000')
		demande('UF', cr, document.getElementById('req_uf'));	
	return false;
}

Pouvez vous m'aider à comprendre ce problème ?

Dans l'attente,
Merci d'avance,

**barbuslex** · 22/11/2010, 10h42

Si ne ne met pas le alert("toto); firebug m'affiche cette erreur :

cr.options[0] is undefined
var valeur_cr = cr.options[0].getAttribute('value');

**Bovino** · 22/11/2010, 10h47

Envoyé par barbuslex

Alors voilà j'ai un problème peut être bête pour certains mais c'est entrain de me rendre dingue et je ne comprend pas pourquoi

C'est une question maintes fois traitée et résolue ! Merci de faire un minimum de recherche avant de poster.

Lorsque tu fais une requête AJAX, tu ne peux utiliser ses résultats qu'une fois que tu les as reçus !
Or dans ton exemple :

Code :

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

if(test_pole(this)) re_test(document.getElementById('req_cr'));

tu n'attends pas le résultat de la requête pour continuer ton script.

Tout ce qui a un rapport avec le résultat doit être traité dans le callback.

**barbuslex** · 22/11/2010, 11h16

A ok c'est ce que je me disais aussi mais je ne savais pas quoi chercher en fait sur le forum pour trouver la réponse ^^

Voici mon code js complet :

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
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
160
161
// JavaScript Document
 
function recherche(formulaire)
{
	var keywords = formulaire.keywords.value;
	if(keywords.length < 3) 
	{ 
		alert('Vous devez saisir 3 caracteres minimum pour effectuer la recherche'); 
		return false; 
	} 
	else 
		formulaire.submit();
}
 
function getXHR()
{
	var xhr = null;
 
	if(window.XMLHttpRequest || window.ActiveXOBject)
	{
		if(window.ActiveXObect)
		{
			try
			{
				xhr = new ActiveXOBject("Msxml2.XMLHTTP");
			}
			catch(e)
			{
				xhr = new activeXObject("Microsoft.XMLHTTP");
			}
		}
		else
		{
			xhr = new XMLHttpRequest();
		}
	}
	else
	{
		alert("Votre navigateur ne supporte pas l'object XMLHTTPRequest...");
		return null;
	}
 
	return xhr;
}
 
function demande(type, choix, liste2)
{
	var valeur = choix.options[choix.selectedIndex].value;
	var xhr = getXHR();
 
 
 
	xhr.onreadystatechange = function() 
	{
		if(xhr.readyState == 4 && (xhr.status === 200 || xhr.status == 0))
		{
			if(type == 'CR')
			{
				document.getElementById('req_uf').innerHTML= "";
				document.getElementById('req_uf').style.display = "none";
			}
			if((type == 'UF') && (valeur == '0000'))
			{
				document.getElementById('req_uf').innerHTML = "";
				document.getElementById('req_uf').style.display = "none";
				return false;
			}
			liste2.style.display = "inline";
			lireResultat(xhr.responseXML, liste2);
		}
		else
		{
			liste2.style.display = "none";
		}
	};
 
	xhr.open("GET", "listes.php?liste1="+valeur+"&type="+type, true);
	//xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	xhr.send(null);
	return true;
}
 
function lireResultat(reponse, liste2)
{
	liste2.innerHTML=null;
	var nodes = reponse.getElementsByTagName("item");
	var oOption, oInner, i, c=nodes.length;
	liste2.innerHtml = "";
 
	for(i=0; i<c; i++)
	{
		oOption = document.createElement("option");
		if(nodes[i].getAttribute("id") == '0000')
		{
			oInner = document.createTextNode(" ");
		}
		else
		{
			oInner = document.createTextNode(nodes[i].getAttribute("id") + " - " +nodes[i].getAttribute("name"));
		}
		oOption.setAttribute('value',nodes[i].getAttribute("id"));
 
		oOption.appendChild(oInner);
		liste2.appendChild(oOption);
	}
	return false;
 
}
 
function redirige(url)
{
	window.location.replace(url);	
}
 
function verif_pj(formulaire)
{
	if(formulaire.req_pole.value != '0000')
		formulaire.submit();
	else
		alert('Vous devez selelectionner le pole');
 
	return false;
}
 
 
function del(annu_id) 
{ 
	if(confirm('Voulez vous vraiment supprimer ce poste ?')) 
		window.open('delphone.php?annuid='+annu_id);
}
 
function re_test(cr)
{
	/*alert("toto");*/
	var valeur_cr = cr.options[0].getAttribute('value');
	/*alert(valeur_cr);*/
	if(valeur_cr != '0000')
	{
		demande('UF', cr, document.getElementById('req_uf'));	
	}
	return false;
}
 
function test_pole(pole)
{
	var i = 0;
	if(pole.options[pole.selectedIndex].value != '0000')  
	{ 
		var cr = document.getElementById('req_cr');
		demande('CR', pole ,document.getElementById('req_cr')); 
		return true;
	} 
	else 
	{ 
		document.getElementById('req_cr').innerHTML = null; 
		document.getElementById('req_cr').style.display = 'none'; 
		document.getElementById('req_uf').innerHTML = null; 
		document.getElementById('req_uf').style.display = 'none'; 
		return false;
	}	
}

En gros je veux que si la première requête ajax renvoit un premier champs ayant pour valeur "0000" alors il relance pas la recherche sur le 3ème select mais si il n'y a pas de champs avec la valeur "0000" alors la il relance la recherche avec le premier résultat de la liste2 sur la liste3.

Ce mécanisme fonctionne pas à pas et est gérer par la fonction re_test();

Seulement je ne vois pas où la placer pour faire comme dis tu....

Un petit peu d'aide serait la bienvenue...

Dans l'attente,
Merci encore,