Discussion :

[gehiks]

Bonjour,

J'ai écrit un petit script AJAX qui fonctionne sous tous les navigateurs sauf IE 7 (et probablement les autres versions mais je n'ai pas de quoi tester sous la main).
Le but de ce script est de créer des listes conditionnelles en fonction de la valeur d'un autre select.

Voici le javascript:

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
 
function changePays(input){
	document.getElementById('departement').innerHTML='';
	document.getElementById('arrondissement').innerHTML='';
	document.getElementById('localite').innerHTML='';
		if (window.XMLHttpRequest){
			xhr = new XMLHttpRequest();
		}
		else if (window.ActiveXObject){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
 
		xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200){
			alert(xhr.responseText);
				listeDepartements=explode('.', xhr.responseText);
				for(var compteur=0; compteur < listeDepartements.length; compteur++){
					var valueText=explode('/', listeDepartements[compteur]);
					document.getElementById('departement').options[compteur]=new Option(listeDepartements[compteur].value);
					document.getElementById('departement').options[compteur].text=''+valueText[1];
					document.getElementById('departement').options[compteur].value=''+valueText[0];
				}
			}
		};
 
	xhr.open("POST", "./scripts/ajax/liste_departement.php", true);
	xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	var data='kw='+input;
	xhr.send(data);
}

Ensuite les script PHP où query = "SELECT DISTINCT(departement) FROM localite WHERE pays=\"".$_POST['kw']."\" ORDER BY departement ASC"

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
 
function option_html_mysql_javascript($query){
	$query_option='/.';
	$mysql=mysql_query($query)or die(mysql_error());
	while($array=mysql_fetch_row($mysql)){
		if(isset($array[1])){
			$query_option.=$array[0].'/'.utf8_encode($array[1]).".";
		}
		else{
			$query_option.=utf8_encode($array[0]).'/'.utf8_encode($array[0]).".";
		}
	}
	$query_option=substr($query_option,0,-1);
	return $query_option;
}

Ce script est censé renvoyer une chaîne de caractère de la forme suivante: "/.Antwerpen/Antwerpen.Brabant Wallon/Brabant Wallon.Bruxelles-Capitale/Bruxelles-Capitale.Hainaut/Hainaut.Liège/Liège.Limburg/Limburg.Luxembourg/Luxembourg.Namur/Namur.Oost-Vlaanderen/Oost-Vlaanderen.Vlaams Brabant/Vlaams Brabant.West-Vlaanderen/West-Vlaanderen".
Lorsque j'ajoute "alert(xhr.responseText);" à mon javascript, il me renvoie bien une chaîne de ce type et remplit correctement la liste d'options sous Firefox 3, Chrome, et Opera 9.51 sous windows XP. Mais sous IE 7, le resultat de cet alert est: "/./". Apparemment, il remplit correctement le select (mais évidemment avec 2 options vides).

Cette chaîne est ensuite transformée en tableau par javascript pour ensuite remplir la liste des options de ma page html.

Ce qui me semble étrange, c'est que j'utilise une fonction très similaire quelques lignes plus loin dans mon javascript et qu'elle fonctionne

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
	if (window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}
 
	else if (window.ActiveXObject){
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	}
 
	xhr.onreadystatechange = function() {
		if(xhr.readyState == 4 && xhr.status == 200){
			listeOptions=explode(';',xhr.responseText);
			for(var i=0;i<listeOptions.length;i++){
				var valueText=explode('.',listeOptions[i]);
				document.getElementById(target_id).options[i]=new Option(listeOptions[i].value);
				document.getElementById(target_id).options[i].text=valueText[2];
				document.getElementById(target_id).options[i].value=valueText[0]+'.'+valueText[1];
			}
			}
		};

Tous mes scripts sont encodés en UTF8 sans BOM.

Quelqu'un aurait-il une solution ou une piste à me proposer?

Bonnes fêtes à tous,

Gêhïks

[islyoung2]

Si tes select sont dans un formulaires essaye d'utiliser cette syntaxe :

Code :

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

1
2
 
document.nom_formulaire.elements['nom_select'].innerHTML;

[Bovino]

Code :

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

1
2
3
document.getElementById(target_id).options[i]=new Option(listeOptions[i].value);
				document.getElementById(target_id).options[i].text=valueText[2];
				document.getElementById(target_id).options[i].value=valueText[0]+'.'+valueText[1];

new Option prend 4 arguments (optionnels) :

Code :

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

new Option(text, value, defaultSelected, selected);

[gehiks]

Merci pour votre aide,

J'ai trouvé d'où venait l'erreur: de mon appel de fonction.

Code :

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

1
2
3
4
5
6
 
<select onchange="changePays(this.value)" name="pays" id="pays">
<option/>
<option>Belgique</option>
<option>France</option>
</select>

Or, si les autres navigateurs donne la valeur du texte de l'option à "this.value" quand "value" est indéfini, pour IE si la "value" n'est pas définie, elle est vide.

Donc pour que mon code fonctionne sous IE, il faut modifier le html de la sorte:

Code :

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

1
2
3
4
5
6
 
<select onchange="changePays(this.value)" name="pays" id="pays">
<option/>
<option value="Belgique">Belgique</option>
<option value="France">France</option>
</select>