Discussion :

[pasc06]

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]

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]

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]

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.

[E.Bzz]

Bonjour,

et ensuite coté client, construit manuellement tes options à partir de cette liste.

C'est de ce genre d'instructions dont tu auras besoin ...

A+

[DoubleU]

En fait, ca revient à faire quelque chose comme ca (l'idée est la, à toi d'adapter à ta situation précise):

Code php :

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

1
2
3
4
5
6
7
8
$res = array();
 
while ($ligne = mysql_fetch_array($resultat)) 
{
    $res[] = $ligne[$nomchamp];
}
// de cette façon, tu ne retourne qu'une liste des éléments à afficher, tu ne t'occupes pas de comment tu vas les afficher puisque ca c'est le boulot de javascript
echo json_encode($res);

Code javascript :

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
 
xhr.onreadystatechange = function()
{
  if(xhr.readyState == 4 && xhr.status == 200)
  {
    var array = eval( "(" + xhr.responseText + ")" );
 
    for(var v=0; v<array.length; v++)
    {
      // ici, a toi de voir si tu as besoin de crééer ton select car il n'existe pas encore (via un document.createElement("select"), ou si tu peux le récupérer via un getElementById s'il est déja présent dans ta page)
      var leSelectDesVilles = ... 
 
      // attention ici l'id et la valeur sont la même, à toi de passer les bonnes valeurs coté php
      leSelectDesVilles.options[leSelectDesVilles.length] = new Option(array[v],array[v]) 
    }
  }
}

De cette façon, tu différencies ce que tu dois afficher (tes données) de la façon dont elles vont être affichées. Et si tu décides de les afficher différemment (ca ne sera probablement pas le cas dans ce contexte, mais dans d'autres situations ca peut arriver), alors tu as juste à changer ce que fait ta fonction javascript.

[E.Bzz]

@DoubleU : tu déconseilles innerHTML, mais tu le remplaces par un eval() ?

Tant qu'à choisir, je préfère une utilisation correcte du innerHTML

A+

[DoubleU]

Vous êtes sur que cela va rendre compatible mon code avec IE ?

Même si l'objectif de la façon de coder n'était pas spécialement de rendre ton code compatible avec IE, normalement il n'y a pas de raison qu'il ne le soit pas.

[E.Bzz]

Il faut que tu donnes un id au TD qui contient la deuxième liste (villes).
Il faut que tu modifies ton code PHP pour qu'il regénère la totalité du select (<select> et </select> compris).
En suite tu remplaces le contenu de ton td par la réponse d'Ajax

Code :

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

document.getElementById('id_du_td').innerHTML = leselect;

(ce qu'IE n'aime pas, c'est remplacer le contenu d'un select existant).

Ce fonctionnement avec innerHTML ne fonctionne pas à l'intérieur d'un <form> (dans ce cas : instructions DOM obligatoires).
Mais ce problème ne semble pas se poser dans ton cas (à confimer !).

A+

[pasc06]

Un id au TD ? Oula...! Tu peux développer ?

Je dois avoir ça en arrivant sur le formulaire :


Je dois donc faire un select dans l'HTML

Ce que je ne comprends pas c'est que je me suis servi de ce tutoriel que j'ai adapté : http://siddh.developpez.com/articles/ajax/

(Voir la partie auteur/livres)

Et que dans ce tutoriel on rend compatible avec IE en mettant le select dans un div en précisant : " 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 si je mets le select dans un div, sous IE la liste déroulante disparait ! Sous Firefox ça fonctionne bien !



Et quand je sélectionne un pays ça m'affiche les villes en bordel !



On m'aurait menti ???!!!!

[DoubleU]

@DoubleU : tu déconseilles innerHTML, mais tu le remplaces par un eval() ?

Tant qu'à choisir, je préfère une utilisation correcte du innerHTML

A+

euh... et alors? ^^

[DoubleU]

Si tu veux prendre ma solution, elle est presque complete.

Code javascript :

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
xhr.onreadystatechange = function()
{
  if(xhr.readyState == 4 && xhr.status == 200)
  {
    var array = eval( "(" + xhr.responseText + ")" );
 
    for(var v=0; v<array.length; v++)
    {
      var leSelectDesVilles = document.getElementById("id_du_select_des_villes");
      leSelectDesVilles.options.length = 1 // pour supprimer toutes les anciennes options, sauf celle du "Choisissez ..." 
 
      // attention ici l'id et la valeur sont la même, à toi de passer les bonnes valeurs coté php
      leSelectDesVilles.options[leSelectDesVilles.length] = new Option(array[v],array[v]) 
    }
  }
}

Il te suffit de déclarer dans ton code html le select qui contiendra tes villes de cette façon:

Code html :

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

1
2
3
<select name="...." id="id_du_select_des_villes">
  <option value="-1">Choississez</option>
</select>

Comme ca, a chaque valeur sélectionnée dans les pays, ca effacera le contenu des villes pour le remplacer par les nouvelles valeurs

[E.Bzz]

Un id au TD ? Oula...! Tu peux développer ?

Développer ?

Code :

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

<td id="id_du_td">

A+

[pasc06]

J'ai donc fait ça :

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
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
var array = eval( "(" + xhr.responseText + ")" );
 
for(var v=0; v<array.length; v++)
{
 var leSelectDesVilles = document.getElementById("id_ville");
leSelectDesVilles.options.length = 1; // pour supprimer toutes les anciennes options, sauf celle du "Choisissez ..." 
 
// attention ici l'id et la valeur sont la même, à toi de passer les bonnes valeurs coté php
leSelectDesVilles.options[leSelectDesVilles.length] = new Option(array[v],array[v]); 
    }
  }
}
}

Côté HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 <tr>
<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">
<option value="-1">Choississez un pays</option>
</select>
</td>
</tr>

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
24
25
26
27
<?php
if(isset($_POST["id_pays"])){
// écriture de la requete
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.'"'; 
 
if((isset($_POST['id_ville']))&&(($_POST['id_ville'])== $i)) 
{ echo 'selected=\"selected\"';} 
 
echo '>'.$ligne['nom_ville'].'</option>';
 
$i++;
}
echo'</select>';
}
?>

Quand je séléctionne un pays il ne se passe rien, ni sur IE, ni sur Firefox

[DoubleU]

La fonction php qui est appelée par ton appel ajax doit changer. Je ne l'ai pas recopiée mais c'est la même que celle que j'ai donné dans mon premier post:

Code php :

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

1
2
3
4
5
6
7
8
$res = array();
 
while ($ligne = mysql_fetch_array($resultat)) 
{
    $res[] = $ligne[$nomchamp];
}
 
echo json_encode($res);

[pasc06]

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
39
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 { // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
xhr = false; 
} 
return xhr;
}
 
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
  if(xhr.readyState == 4 && xhr.status == 200)
  {
    var array = eval( "(" + xhr.responseText + ")" );
 
    for(var v=0; v<array.length; v++)
    {
      var leSelectDesVilles = document.getElementById("id_ville");
      leSelectDesVilles.options.length = 1; // pour supprimer toutes les anciennes options, sauf celle du "Choisissez ..." 
 
      // attention ici l'id et la valeur sont la même, à toi de passer les bonnes valeurs coté php
      leSelectDesVilles.options[leSelectDesVilles.length] = new Option(array[v],array[v]); 
    }
  }
}
}

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 <tr>
<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">
<option value="-1">Choississez un pays</option>
</select>
</td>
</tr>

lister_ville.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
<?php
if(isset($_POST["id_pays"])){
// écriture de la requete
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());
$res = array();
 
while ($ligne = mysql_fetch_array($resultat)) 
{
    $res[] = $ligne[$nomchamp];
}
 
echo json_encode($res);
}
?>

Quand je sélectionne une ville il ne se passe toujours rien

[pasc06]

La solution de E.Bzz semble fonctionner : En donnant un id au TD

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
39
40
41
42
43
44
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
{ // XMLHttpRequest non supporté par le navigateur 
alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
xhr = false; 
} 
return xhr;
}
 
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhr.readyState == 4 && xhr.status == 200){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('id_villes').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","lister_villes.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du pays
sel = document.getElementById('id_pays');
idpays = sel.options[sel.selectedIndex].value;
xhr.send("id_pays="+idpays);
}

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<tr>
<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 id="id_villes" align="left" valign="middle" class="Style4">
<select name="id_ville" id="id_ville" style="width:200px">
<option value="0" selected="selected">choisissez un pays</option></select>
</td>
</tr>

lister_ville.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
24
25
26
27
<?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());
 
// affichage du composant HTML
echo '<select name="id_ville" id="id_ville" style="width:200px">';
 
$i = 1;
 
while ($ligne = mysql_fetch_array($resultat)) {
echo '<option value="'.$i.'"'; 
 
if((isset($_POST['id_ville']))&&(($_POST['id_ville'])== $i)) { echo 'selected=\"selected\"';} 
 
echo '>'.$ligne['nom_ville'].'</option>';
 
$i++;
}
echo'</select>';
}
?>

Il était temps j'étais en train de devenir zinzin !

Merci de votre aide à tous c'était vraiment sympa !

A+

[E.Bzz]

Mais attention : tu as dupliqué id="id_ville".
Celui du td + celui du select => modifie un des deux pour qu'ils restent uniques dans la page ...

A+

[pasc06]

Bin non j'ai mis un "s" pour l'id du td : id_villes

Je me trompe ?

[E.Bzz]

Bin non j'ai mis un "s" pour l'id du td : id_villes

Je me trompe ?

Arf, non !

C'est moi qui n'avait pas vu : tout bon alors ...

A+