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

Version imprimable

Voir 40 message(s) de cette discussion en une page

12/02/2010, 16h11
Kenshin86

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

Je fais le test pour les différentes listes maintenant.
12/02/2010, 16h16
E.Bzz

Citation:

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.

:ccool:

A+
12/02/2010, 16h18
Kenshin86

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 ?
12/02/2010, 16h29
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+

Citation:

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:

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); 
 
}

12/02/2010, 16h59
E.Bzz
Dans le onreadystatechange de gonumeroetage(), si tu fais un alert() du responseText (avant de l'affecter au innerHTML), ça donne quoi ?
Code:

1 2 leselect = xhr.responseText; alert(leselect);
A+
12/02/2010, 17h10
Kenshin86
Citation:
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:

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
12/02/2010, 17h19
Kenshin86

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)
12/02/2010, 17h22
E.Bzz
:koi:

Bon, ben en remontant dans ton code, à partir de cette alert() qui n'alerte rien du tout, il faut que tu testes tout :aie:
- 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+
12/02/2010, 17h24
E.Bzz

Citation:

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 :aie:

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+
12/02/2010, 17h54
Kenshin86

Citation:

Envoyé par E.Bzz

:koi:[*]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:

xhr.send("id_numeroetage="+idnumeroetage+"&id_batiment="+idbatiment);
12/02/2010, 18h00
E.Bzz

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 :mrgreen:

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

A+

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:

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); 
}

12/02/2010, 21h08
Kenshin86

Le problème vient de la :

Code:

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

Lorsque je fais :

Code:

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.

Voir 40 message(s) de cette discussion en une page