[AJAX] Select lié [IE : NON / FF : OK]

**Kenshin86** · 12/02/2010, 16h11

Oui maintenant, je fais du $_GET dans mes pages php et ça fonctionnes

Je fais le test pour les différentes listes maintenant.

**E.Bzz** · 12/02/2010, 16h16

Envoyé par Kenshin86

Oui maintenant, je fais du $_GET dans mes pages php et ça fonctionnes

Je fais le test pour les différentes listes maintenant.

A+

**Kenshin86** · 12/02/2010, 16h18

Donc toutes mes listes s'affichent correctement...

Y compris dans différents navigateurs.

http://127.0.0.1/gmao/ajaxBureau.php...&id_batiment=1

Donc cela viendrait bien de mon fichier ajax.js ?

**E.Bzz** · 12/02/2010, 16h29

Une dernière étape : c'est peut être bien les paramètres que tu envoies via Ajax qui ne permettent pas de ramener un résultat (il suffit parfois de quelque espaces en trop après un code valide, dans une chaîne de caractères).
Pour vérifier, affiche ces paramètres (via alert()) lors de chaque appel Ajax.
Tu verras peut être une anomalie/incohérence/code inexistant ou autre.

EDIT : Dans le alert(), entoure chaque valeur par un caractère visible (style "/"), sinon tu ne verrais pas les espaces en trop

A+

**Kenshin86** · 12/02/2010, 16h43

Envoyé par E.Bzz

Une dernière étape : c'est peut être bien les paramètres que tu envoies via Ajax qui ne permettent pas de ramener un résultat (il suffit parfois de quelque espaces en trop après un code valide, dans une chaîne de caractères).
Pour vérifier, affiche ces paramètres (via alert()) lors de chaque appel Ajax.
Tu verras peut être une anomalie/incohérence/code inexistant ou autre.

EDIT : Dans le alert(), entoure chaque valeur par un caractère visible (style "/"), sinon tu ne verrais pas les espaces en trop

A+

Je n'ai pas vraiment compris la. J'ai rajouté l'affichage de mes variables après chaque xhr.send et il m'affiche mes variables correctement

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
function getXhr()
{ 
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres 
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	{ 
		try 
		{ 
			xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
		} 
		catch (e) 
		{ 
			xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
	} 
	else  // XMLHttpRequest non supporté par le navigateur  
	{ 
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	xhr = false; 
	} 
	return xhr; 
} 
 
/** 
* Méthode qui sera appelée sur le click du bouton 
*/ 
function go()
{ 
	var xhr = getXhr(); 
	// On défini ce qu'on va faire quand on aura la réponse 
	xhr.onreadystatechange = function()
	{ 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
		if(xhr.readyState == 4 && xhr.status == 200)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebatiment').innerHTML = leselect; 
			document.getElementById('lebatiment').onchange = gobatiment;
			gobatiment();
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBatiment.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('corps_de_metier'); 
	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
	xhr.send("id_corpsdemetier="+idcorpsdemetier);
	alert("cdm:"+idcorpsdemetier); 	
} 
 
function gobatiment()
{ 
	var xhr = getXhr(); 
	// On défini ce qu'on va faire quand on aura la réponse 
	xhr.onreadystatechange = function()
	{ 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
		if(xhr.readyState == 4 && xhr.status == 200)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lenumeroetage').innerHTML = leselect; 
			document.getElementById('lenumeroetage').onchange = gonumeroetage;
			gonumeroetage();
 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxNumetage.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('batiment'); 
	idbatiment = sel.options[sel.selectedIndex].value; 
	xhr.send("id_batiment="+idbatiment); 
	alert("bat:"+idbatiment); 
} 
 
function gonumeroetage()
{ 
	var xhr = getXhr(); 
	// On défini ce qu'on va faire quand on aura la réponse 
	xhr.onreadystatechange = function()
	{ 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
		if(xhr.readyState == 4 && xhr.status == 200)
		{ 
			leselect = xhr.responseText; 
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebureau').innerHTML = leselect;
 
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBureau.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
 
	sel = document.getElementById('numero_etage'); 
	sel1 = document.getElementById('batiment'); 
	//sel2 = document.getElementById('bureau'); 
	idnumeroetage = sel.options[sel.selectedIndex].value;
	idbatiment = sel1.options[sel1.selectedIndex].value;
	//idbureau = sel2.options[sel2.selectedIndex].value;
	//xhr.send("id_numeroetage="+idnumeroetage); 
	//xhr.send("id_numeroetage="+idnumeroetage); 
	//xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment+"&id_bureau="+idbureau); 
	xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment); 
	alert("num_etage="+idnumeroetage); 
	alert("bat 2="+idbatiment); 
 
}

**E.Bzz** · 12/02/2010, 16h59

Dans le onreadystatechange de gonumeroetage(), si tu fais un alert() du responseText (avant de l'affecter au innerHTML), ça donne quoi ?

Code :

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

1
2
leselect = xhr.responseText;
alert(leselect);

A+

**Kenshin86** · 12/02/2010, 17h10

Envoyé par E.Bzz

Dans le onreadystatechange de gonumeroetage(), si tu fais un alert() du responseText (avant de l'affecter au innerHTML), ça donne quoi ?

Code :

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

1
2
leselect = xhr.responseText;
alert(leselect);

A+

Donc quand je fais cela.

J'ai comme affichage :
<select name='bureau' id='bureau'><option value='3'>Informatique</option></select>

Et du coup le reste du traitement est impeccable.

A Noter qu'avec IE et Opera, je n'a pas d'affichage du alert

**Kenshin86** · 12/02/2010, 17h19

Il est à noter que même dans la 1ere fonction "go()"

lorsque je fais un alert du "leselect"

Je n'ai rien d'afficher comme alert, mais j'ai cependant mon nom de bâtiment qui s'affiche correctement (pour tous les navigateurs)

**E.Bzz** · 12/02/2010, 17h22

Bon, ben en remontant dans ton code, à partir de cette alert() qui n'alerte rien du tout, il faut que tu testes tout

une alert() pour vérifier que chaque info est bien récupérée
une trace sur le serveur pour vérifier que celui-ci reçoit bien la valeur attendue (attention toujours au caractères non visibles)
vérification qu'aucun objet de ta page n'ait un id ou name correspondant à un nom d'une de tes variables
vérification que les name/id des <select> générés dynamiquement restent bien les mêmes que ceux définis "en dur" à l'origine
etc ... suivant inspiration

A+

**E.Bzz** · 12/02/2010, 17h24

Envoyé par Kenshin86

Je n'ai rien d'afficher comme alert, mais j'ai cependant mon nom de bâtiment qui s'affiche correctement (pour tous les navigateurs)

Information intéressante

Mais c'est peut être juste un problème de quottes (simple ou double) dans le retour Ajax qui ne plante que le alert() lui-même.
A confirmer quand même

A+

**Kenshin86** · 12/02/2010, 17h54

Envoyé par E.Bzz

[*]vérification qu'aucun objet de ta page n'ait un id ou name correspondant à un nom d'une de tes variables[/LIST]
A+

C'est à dire, dans le fichier ajax.js ?

parce que dans la dernière fonction, je récupères (encore!) l'id batiment (parce que j'en ai besoin pour faire une jointure) et elle a le même nom que l'id batiment que je récupérais plus haut. le problème ne peut pas venir de la ?

Ou alors il y aurait pas de problème de syntaxe ici ?

Code :

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

xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment);

**E.Bzz** · 12/02/2010, 18h00

Non je ne vois pas de problème de syntaxe là.

Sinon, ce que je voulais dire, c'est que si tu as, comme ici, une variable idbatiment dans une fonction, il ne faut pas que tu ais dans ta page quelque part un id="idbatiment" ou name="idbatiment".
IE n'aime pas du tout

Pour ce cas là j'ai vérifié, mais il faut le faire pour toutes les variables que tu utilises ...

A+

**Kenshin86** · 12/02/2010, 19h51

Maintenant, j'affiche tous les alert pour tous les navigateurs et donc bien sûr, je récupères toutes les listes pleines (FF et Google Chrome)

Opera remplit toutes les listes également mais n'affiche pas le dernier alert (à la sélection du numéro d'étage)

IE lui affiches pas tous les alert... mais lors de la modification d'un numéro d'étage, il affiche pas la dernière liste...

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
function getXhr()
{ 
	var xhr = null; 
	if(window.XMLHttpRequest) // Firefox et autres 
		xhr = new XMLHttpRequest(); 
	else if(window.ActiveXObject) // Internet Explorer 
	{ 
		try 
		{ 
			xhr = new ActiveXObject("Msxml2.XMLHTTP"); 
		} 
		catch (e) 
		{ 
			xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
		} 
	} 
	else  // XMLHttpRequest non supporté par le navigateur  
	{ 
	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
	xhr = false; 
	} 
	return xhr; 
} 
 
/** 
* Méthode qui sera appelée sur le click du bouton 
*/ 
function go()
{ 
	var xhr = getXhr(); 
	// On défini ce qu'on va faire quand on aura la réponse 
	xhr.onreadystatechange = function()
	{ 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
		if(xhr.readyState == 4 && xhr.status == 200)
		{ 
			leselect = xhr.responseText;
			alert(leselect);			
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebatiment').innerHTML = leselect; 
			document.getElementById('lebatiment').onchange = gobatiment;
			gobatiment();
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBatiment.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('corps_de_metier'); 
	idcorpsdemetier = sel.options[sel.selectedIndex].value; 
	xhr.send("id_corpsdemetier="+idcorpsdemetier);
	//alert("cdm:"+idcorpsdemetier); 	
} 
 
function gobatiment()
{ 
	var xhr = getXhr(); 
	// On défini ce qu'on va faire quand on aura la réponse 
	xhr.onreadystatechange = function()
	{ 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
		if(xhr.readyState == 4 && xhr.status == 200)
		{ 
			leselect1 = xhr.responseText; 
			alert(leselect1);
			//alert(leselect);
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lenumeroetage').innerHTML = leselect1; 
			document.getElementById('lenumeroetage').onchange = gonumeroetage;
			gonumeroetage();
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxNumetage.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('batiment'); 
	idbatiment = sel.options[sel.selectedIndex].value; 
	xhr.send("id_batiment="+idbatiment); 
	//alert("bat:"+idbatiment); 
} 
 
function gonumeroetage()
{ 
	var xhr = getXhr(); 
	// On défini ce qu'on va faire quand on aura la réponse 
	xhr.onreadystatechange = function()
	{ 
		// On ne fait quelque chose que si on a tout reçu et que le serveur est ok 
		if(xhr.readyState == 4 && xhr.status == 200)
		{ 
			leselect2 = xhr.responseText; 
			alert(leselect2);
			// On se sert de innerHTML pour rajouter les options a la liste 
			document.getElementById('lebureau').innerHTML = leselect2;
		} 
	} 
	// Ici on va voir comment faire du post 
	xhr.open("POST","ajaxBureau.php",true); 
	// ne pas oublier ça pour le post 
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
	// ne pas oublier de poster les arguments 
	// ici, l'id de l'auteur 
	sel = document.getElementById('numero_etage'); 
	sel1 = document.getElementById('batiment'); 
	//sel2 = document.getElementById('bureau'); 
	idnumeroetage = sel.options[sel.selectedIndex].value;
	idbatiment = sel1.options[sel1.selectedIndex].value;
	//idbureau = sel2.options[sel2.selectedIndex].value;
	//xhr.send("id_numeroetage="+idnumeroetage); 
	//xhr.send("id_numeroetage="+idnumeroetage); 
	//xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment+"&id_bureau="+idbureau);
	xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment); 
	//alert("num_etage="+idnumeroetage); 
	//alert("bat 2="+idbatiment); 
}

**Kenshin86** · 12/02/2010, 21h08

Le problème vient de la :

Code :

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

xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment);

Lorsque je fais :

Code :

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

xhr.send("id_batiment="+idbatiment);

Ma dernière liste s'affiche correctement enfin sur...IE ainsi que sur les autres.

cependant j'avais besoin du numéro d'étage sélectionné pour afficher le bureau en fonction de l'étage... il n'a pas l'air de vouloir m'envoyer deux arguments pour IE...

Pourrais-je récupérer le xhr send d'une autre fonction ou alors poster mes 2 paramètres ? ça pourrait régler définitivement mon problème.

[AJAX] Select lié [IE : NON / FF : OK]

AJAX

Discussions similaires

Partager

Partager