Mise à jour d'un select via php : ok sur FF, pas sur IE6 [Résolu]

[fayred]

Bonjour,

j'ai vu que cette question avait déja été traitée mais je n'arrive pas à tout comprendre.

Je remplis un select en appelant un script php via dojo.io.bind() (c'est pareil que si je faisais une requete XMLHTTPRequest). Sous FF mon select se remplit parfaitement. Par contre sous IE6, via IE developer toolbar je vois que mon select est bien rempli mais par contre à l'affichage il est vide...

Je rempli le select via inner.html. Je sais que ce n'est pas le mieux, mais comment faire autrement puisque je recupere de ma requete au serveur:

Code :

1
2
3
 
<option id="37" value="Machin">Machin</option><option id="38" value="Bidule"
>Bidule</option>

Je ne peux pas faire de new option(...).

Alors comment faire???

Merci de votre aide

[denisC]

Envoyé par fayred

Je ne peux pas faire de new option(...).

Si mais il faudrait parser....

Essaye éventuellement de modifier le type du bouton submit de ton formulaire en submit (oui, je sais ça change pas grand chose), après avoir inséré le contenu dans le select.
Cette opération assez étrange déclenche dans IE 6 une prise en compte des nouveautées dans le formulaire (enfin parfois).

Sinon, il faudra parser la réponse et faire des new option / insertions en DOM. Et éventuellement changer le format dans lequel tu transmets tes données pour quelque chose de plus adapté (JSON?)

[fayred]

Merci pour ta réponse.
Effectivement je vais me tourner vers JSON : aurais-tu un lien vers un tuto car je ne suis pas sure de la syntaxe pour envoyer une chaine JSON remplie dynamiquement par php?

Voila ou j'en suis :
fichier php

Code :

1
2
3
4
5
6
7
8
9
10
11
 
/*Requete mysql*/
echo "[";
 
while($result=mysql_fetch_array($res))
		 { 
			echo ("{\"id\":".$result['nom'].", \"value\":".$result['nom']."}"); 
 
 
		 }
echo "]";

au niveau javascript (avec utilisation de dojo)

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
 
var leSelectmaj=document.getElementById('nomSalarie');
	dojo.io.bind({
                       url: 'php/scriptMaj.php',  			   
					   load: function(type, data, evt)
								{
									if (type=="load")
									{
										//Traitement du JSON...
										while (leSelectmaj.childNodes.length>0) {
										  leSelectmaj.removeChild(leSelectmaj.firstChild);
										}
										var retour=data;
										for (var i in retour)
										{
											var unS=retour[i];
											opt = document.createElement('option') ;
											opt.value = retour.value ; 
											opt.id = retour.id ; 
 
											leSelectmaj.appendChild(opt) ;
										}
 
 
									}
								 },
 
                      	mimetype:"text/json"
                    });

Selon firebug je recupere bien mes donnees :

Response du script php :

Code :

1
2
 
[{"id":37, "value":Machin },{"id":38, "value":Machine },{"id":34, "value":Bidule } ]

Pourtant mon select est vide...

EDIT : lorsque j'affiche ce que je reçois du serveur j'ai "False". Il y a donc surement un problème au niveau envoi de json enphp...

[denisC]

Envoyé par fayred

Response du script php :

Code :

Les chaines de caractères doivent être entre Guillemets. Pour les nombres, ce n'est pas nécessaire :

Code :

1
2
 
[{"id":37, "value":"Machin" },{"id":38, "value":"Machine" },{"id":34, "value":"Bidule" } ]

[fayred]

Enfin! ça y est! ça fonctionne!

Voici le code final :

php

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
$retour.= "[";
		$nb=mysql_num_rows($res); 
		$i=0;
		while($result=mysql_fetch_array($res))
		 { 
 
			$id=$result['id_salarie'];
			$valeur=$result['nom'].'-'.$result['prenom']; 
			$contenu=$result['nom'].' '.$result['prenom'];
 
			 $retour.= ("{\"id\":".$result['id_salarie'].", \"value\":\"".$result['nom'].'-'.$result['prenom']."\", \"contenu\":\"".$result['nom'].' '.$result['prenom']."\"}"); 
			if ($i!=$nb-1)
				{ 
					$retour.=",";
				}
			$i++;
		 }
 
		$retour.="]";
		echo $retour;

code javascript avec utilisation de dojo.io.bind

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
 
var leSelectmaj=document.getElementById('nomSalarie'); 
//On nettoie le select avant d'y inserer de nouveaux elements
	while (leSelectmaj.childNodes.length>0) {
		leSelectmaj.removeChild(leSelectmaj.firstChild);
	}
	dojo.io.bind({
                       url: 'php/scriptMaj.php',  			   
					   load: function(type, data, evt)
								{
									if (type=="load")
									{
										//Traitement du JSON...
 
 
										var retour=eval(data);
 
										for (var i in retour)
										{
											var uneL=retour[i];
											leSelectmaj.appendChild(new Option (uneL.contenu,uneL.value,false, false ));
 
									}
								 },		
                      	mimetype:"text/plain"
                    });

Voili voilou!!!

Merci encore denisC !

[fayred]

J'ai crié victoire trop tôt : j'avais oublié de tester avec ie

Donc en fait le code ci-dessus marche nickel avec FF.
Avec IE par contre c'est tres bizarre :

• Les options sont bien crées
• la value de l'option est bien rempli
• mais pas le contenu!!!!

Si j'ai 10 noms j'ai 10 cases vides dans mon select...
Est-ce que IE a du mal avec new Option()???

EDIT : j'ai la solution (est-ce bien propre?) grâce à ce site.

remplacer

Code :

1
2
 
leSelectmaj.appendChild(new Option (uneL.contenu,uneL.value,false, false ));

par

Code :

1
2
 
leSelectmaj.options.add(new Option (uneL.contenu,uneL.value,false, false ));

Cette fois, c'est bon !
@+

[denisC]

Envoyé par fayred

EDIT : j'ai la solution (est-ce bien propre?)

C'est pas propre parceque ce n'est W3C, mais de la syntaxe IE, qui a été portée sur Firefox pour des soucis de compatibilité. Mais je ne pense pas que tu trouveras une solution plus propre.

Enfin, ça fonctionne, c'est l'essentiel