[AJAX] Différence responseText entre IE et les autres navigateurs
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:
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:
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:
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
