[AJAX] compatibilité liste déroulante liée avec Internet Explorer IE

**pasc06** · 09/12/2008, 10h17

Bonjour,

je suis en train de développer un formulaire avec 2 listes déroulantes liées :
- La première liste déroulante avec les pays
- La seconde liste est dynamique. Elle affiche les villes du pays choisi précédemment

Mon code marche parfaitement avec Firefox, mais dans IE, quand on a choisi un pays (ici la France), la liste déroulante des villes reste vide.

Avec Firefox :

Avec IE :

Voici le code HTML:

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
<td align="left" class="Style4">Mon pays de résidence</td>
<td align="left" valign="middle" class="Style4">
<?php lister('pays','nom_pays');?>
</td>
</tr>
<tr>
<td align="left" class="Style4">Ma ville de résidence</td>
<td align="left" valign="middle" class="Style4"><select name="id_ville" id="id_ville" style="width:200px">
<?php 
echo '<option value="0"';
echo '>choisissez un pays</option>';
echo '</select>';
?>				
</td>
</tr>

lister.php

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
<?php
function lister ($table,$nomchamp) {
$requete = "select $nomchamp from $table order by $nomchamp";
$resultat = mysql_query($requete) or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
 
echo '<select name="'.'id_'.$table.'" id="'.'id_'.$table.'" style="width:200px" onchange="go()">';
 
echo '<option value="0"';
if(!isset($_POST['id_'.$table])) { echo 'selected=\"selected\"';} 
 
echo '>choisissez...</option>';
$i = 1;
 
while ($ligne = mysql_fetch_array($resultat)) {
echo '<option value="'.$i.'"'; 
 
echo '>'.$ligne[$nomchamp].'</option>';
 
$i++;
}
echo'</select>';
}
?>

lister_villes.php

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
<?php
if(isset($_POST["id_pays"])){
require_once 'connectbdd.php';  
require_once 'donne_pays.php';
$pays = $_POST["id_pays"];
$pays = donne_pays($pays);
 
require_once 'connectbdd.php';                            
$resultat = mysql_query('SELECT nom_ville FROM '.$pays.'_villes'.' ORDER BY nom_ville') 
or die('Erreur SQL !'.$sql.'<br>'.mysql_error());
 
$i = 1;
 
while ($ligne = mysql_fetch_array($resultat)) {
echo '<option value="'.$i.'"'; 
 
echo '>'.$ligne['nom_ville'].'</option>';
 
$i++;
}
echo'</select>';
}
?>

Partie Ajax :

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
31
32
33
34
35
36
37
38
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 { 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
xhr = false; 
} 
return xhr;
}
 
function go(){
var xhr = getXhr();
 
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
 
document.getElementById('id_ville').innerHTML = leselect;
}
}
 
xhr.open("POST","lister_villes.php",true);
 
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
sel = document.getElementById('id_pays');
idpays = sel.options[sel.selectedIndex].value;
xhr.send("id_pays="+idpays);
}

Je crois qu'il faut mettre une balise div dans le code HTML mais j'ai essayé plusieurs solutions et ça ne fonctionne toujours pas.

Merci de votre aide

**Bovino** · 09/12/2008, 10h26

Désolé, mais il manque pas mal de renseignements utiles pour pouvoir t'aider :

Le code HTML généré (pas PHP)
Le code javascript d'appel Ajax
Le code javascript de remplissage de ton select
Si possible le responseText de ta requête.

Cependant, j'imagine que tu insères mal tes options dans la seconde liste et que tu n'as pas fait de recherche sur le forum pour éventuellement voir les solutions proposées à des problèmes semblables

**pasc06** · 09/12/2008, 10h40

J'ai rajouté quasiment tous les fichiers sauf "connectbdd.php" et "donne_pays.php" dans mon message d'origine. Pour info les pays sont stockées dans la base sous forme de chiffre et la fonction "donne_pays.php" qui a pour argument le chiffre du pays renvoie le nom du pays (ex: donne_pays(1) renvoie "France") Ca fonctionne bien.

J'ai déjà cherché dans le forum et dans les tutoriels. C'est pour cela que je crois que c'est un problème de div !

Voir cette page : http://siddh.developpez.com/articles/ajax/

Ou il est écrit : "Si on doit mettre le select dans un div et faire un innerHTML dessus, c'est car Internet Explorer ne gère pas les innerHTML dans un select."

Le problème c'est que je ne sais pas ou mettre le div !

Je rappelle que ça fonctionne avec Firefox mais pas avec IE

**DoubleU** · 09/12/2008, 10h54

Comme le dit Bovino, pourquoi passer par un innerHTML ?

Contente toi de faire retourner à ta fonction ajax la liste des villes (en JSON, en xml, ou même d'une autre manière, peu importe), et ensuite coté client, construit manuellement tes options à partir de cette liste.

Il faut bien voir qu'à part dans des cas spéciaux, l'utilisation du innerHTML participe à une mauvaise façon de coder.