Page 1 sur 1

Problème innerHTML sous IE

Posté : 04 janv. 2007, 16:34
par Rei Itchido
Bonjour à tous,
Je rencontre un problème avec innerHTML sous IE

J'ai 2 balises select (departement et ville) et sur le onchange() du select departement, le select ville doit se mettre à jour.
Toutes les infos sont stockées dans une BD mysql.
Je reussi à faire ce que je veux mais ça ne fonctionne que sous FF et Opera.

Sos IE tout fonctionne jusqu'à la fin de la fonction get_ville() mais le select n'est pas mis à jour

Voici mon code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
	<title>Exemple 1</title>
	
	<script type='text/JavaScript'>
		var xhr = null; 
 
		function getXhr() {
			if(window.XMLHttpRequest) {
				xhr = new XMLHttpRequest(); 
			}
			else if(window.ActiveXObject) { 
				try {
					xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} 
				catch (e) {
					xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			else {
				alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				xhr = false; 
			} 
		}
		
		function get_ville(){
			
			var dep_id = document.getElementById("select_dep").value;
								
			getXhr()
		        xhr.onreadystatechange = function() {				
				if(xhr.readyState == 4 && xhr.status == 200) {
				alert(xhr.responseText); // jusqu'ici tout va bien, je récupère bien ce qu'il faut
                                document.getElementById("select_ville").innerHTML = xhr.responseText; // et là rien, le select n'est pas mis à jour// 
				}
			}
			
			xhr.open("POST","ville_t.php",true);
			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
			xhr.send("dep_id=" + dep_id);
		}
	</script>
</head>
<body onload="get_ville()">
<form id="form_ville" name="form_ville">
	<select id="select_dep" name="select_dep" onchange="get_ville()">
	<?php
	$req_dep = mysql_query("SELECT * FROM departement ORDER BY dep_id");
	WHILE($data_dep = mysql_fetch_array($req_dep)) {
		printf("<option value=\"%d\">%s</option>", $data_dep['dep_id'], $data_dep['dep_nom']);
	}
	?>
	</select>
	
	<select id="select_ville" name="select_ville">
	</select>
</form>
</body>
</html>

Merci d'avance pour votre aide.

Posté : 04 janv. 2007, 16:40
par Xenon_54
À quoi correspond le contenu de ville_t.php ?
De plus, si tu fais un alert() du contenu de xhr.responseText, qu'obtiens-tu?

Posté : 04 janv. 2007, 16:56
par Rei Itchido
À quoi correspond le contenu de ville_t.php ?
Ce fichier traite la requête et renvoie bien ce qu'il faut. D'ailleurs ça fonctionne bien sous FF et Opera
De plus, si tu fais un alert() du contenu de xhr.responseText, qu'obtiens-tu?
J'obtiens bien ce que j'attend de ville_t.php à savoir...hmmm
En fait je viens de vérifier et y a quand même un pti souci dans ce que je récupère (je pense pas que ça joue sur le innerHTML mais sait-on jamais).

Voilà ce que me donne l'alert()

Code : Tout sélectionner

<option value="1">aaa</option>30<option value="3">bbb</option>30<option value="4">xxxx</option>31
Je ne sais pas du tout d'où sortent 30 30 et 31 :shock:

Posté : 04 janv. 2007, 17:00
par Rei Itchido
Je viens de voir d'où sortent ces nombres, une petite erreur dans ville_t.php

Je récupère bien ce que je veux et correctement maintenant

Code : Tout sélectionner

<option value="1">aaa</option><option value="3">bbb</option><option value="4">xxxx</option>
EDIT : au cas où, je récupère bien ce qu'il faut mais ça ne fonctionne toujours pas hein :lol:

Posté : 04 janv. 2007, 18:09
par Xenon_54
As-tu des erreurs dans la console Javascript?
Il faudra aussi vérifier à virer les chiffres entre les <option>

Posté : 05 janv. 2007, 11:07
par Rei Itchido
Je n'ai pas d'erreur JS. Ca fonctionne nickel sous FF et Opera mais pas sous IE.

Mon code :

Code : Tout sélectionner

xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200) { alert(xhr.responseText); // m'affiche <option value="2">ville2</option> document.getElementById("select_ville").innerHTML = xhr.responseText; // le select n'est pas mis à jour sous IE alert(document.getElementById("select_ville")) // m'affiche bien [object] sous IE donc le select est reconnu }
Je ne comprends pas où peut être le pb :?

Posté : 05 janv. 2007, 13:53
par Cyrano
Le problème vient de ce que sous IE, tu ne peux pas utiliser un innerHTML dans un <select> : il te faut donc regénérer l'élément complet incluant les balises <select> et </select> : pour que ça fonctionne, il faut dans ta page modifier la cible en encadrant cet élément select dans un <span> par exemple et en y mettant un id pour pointer dessus : par exemple :

Code : Tout sélectionner

<span id="liste_xyz"> <select> <option value="-1">----------</option> </select></span>
et dans ton JavaSCript, tu pointes alors sur:

Code : Tout sélectionner

document.getElementById['liste_xyz'].innerHTML = 'ta liste complète';

Posté : 05 janv. 2007, 14:40
par Rei Itchido
Effectivement Cyrano, en reconstruisant le select en entier cela fonctionne.
Merci :)

Posté : 05 janv. 2007, 15:28
par naholyr
Le plus propre étant de travailler avec l'attribut "options" de ton objet SELECT du DOM.

Posté : 08 janv. 2007, 10:12
par Rei Itchido
Tu peux m'en dire un peu plus stp? :merci:

Posté : 08 janv. 2007, 10:38
par Cyrano
Tu vas trouver pas mal d'informations sur cette page

Posté : 08 janv. 2007, 11:03
par Rei Itchido
Merci je regarde ça