Discussion :

[renaud26]

Bonjour à tous,

Après avoir lu quelques tutos et parcouru le forum, je me suis lancer dans une 1ere manip de XMLHttpRequest. Un select affiche les départements depuis la BDD. Si un département est sélectionné, un autre select affiche dynamiquement les villes de ce département.

La fonction JS :

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 affiche_villes(f) {
var l1    = f.elements["dept"];
var l2    = f.elements["ville"];
var index = l1.selectedIndex;
if(index < 1)
	l2.options.length = 0;
else {
var xhr_object = null;
 
if(window.XMLHttpRequest) // Firefox
else if(window.ActiveXObject) // Internet Explorer
xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
else { // XMLHttpRequest non supporté par le navigateur
alert("Votre navigateur ne supporte pas les scripts utilisés sur ce site. Merci d\'utiliser IE ou FF...");
return;
}
 
xhr_object.open("POST", "page.php", true);
 
xhr_object.onreadystatechange = function anonymous() {
	if(xhr_object.readyState == 4)
		eval(xhr_object.responseText);
	}
 
xhr_object.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
var data = "id_dept="+escape(l1.options[index].value)+"&form="+f.name+"&select=villes";
xhr_object.send(data);
	}
}

Côté formulaire / php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
//le select des départements avec appel fonction affiche_villes
$sql = mysql_query("SELECT id, dept FROM depts ORDER BY id");
$ligne = "<select name='dept' id='dept' onchange='affiche_villes(this.form);'>";
$ligne .= "<option>Sélectionnez un département</option>";
while($row = mysql_fetch_assoc($sql)){
($_POST['dept'] == $row['id']) ? $select = "selected" : $select = "";
//la ligne ci-dessus récup le dept si le formulaire a été soumis
$ligne .= "<option value='".$row['id']."' ".$select.">".$row['dept']))."</option>";
}
$ligne .= "</select>";
echo $ligne;

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//le traitement du XMLHttpRequest après que le département ait été choisi
if(isset($_POST['id_dept'])){
$query  = "SELECT id, nom,  FROM villes WHERE id_dept = '".$_POST['id_dept'."' ORDER BY nom"; 
$result = @mysql_query($query); 
//remplissage du select des villes avec objet Option
echo 'var s = document.forms["form1"].elements["villes"];'; 
echo 's.options.length = 0;'; 
echo 's.options[0] = new Option(\'Sélectionnez une ville\');';
while($r = mysql_fetch_assoc($result)){
echo 's.options[s.options.length] = new Option("'.$r["nom"].',"'.$r['id'].'");';
} 
}

Code :

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

1
2
3
4
5
 
 //le select des villes auquel XMLHttpRequest s'applique
<select name="villes" id="villes">
<option value="0">Sélectionnez une ville</option>
</select>

Et c'est magique ! on choisit un département, et, dans le select des villes, la liste s'affiche ! Super !

Mais alors ? pourquoi je poste ici ? Ben, parce que lorsque le formulaire est soumis et qu'un erreur de contrôle survient (un champ manquant, par exemple), j'arrive à ré afficher le département qui a été sélectionné, mais pas la ville ! J'ai lu que l'objet Option prenait selected et selectedIndex en paramètres, mais je ne parviens pas à les utiliser. Je ne sais pas si je dois à nouveau faire appel à la fonction JS affiche_villes et comment le faire...

Merci de vos lumières.

[andry.aime]

Bonjour,
Construits les options de tes listes liées avec DOM et d'une responseXML de ton AJAX. Une discussion résolue : Liste liées Ajax .

[renaud26]

Bonjour et merci de ta réponse,

J'ai tenté de décortiquer ce post avec tous ses éléments, ainsi que le tuto qui y fait référence.

Ca fonctionne pour ce qui est de l'affichage des villes lorsque un département est sélectionné - par contre j'ai une erreur : "rst is null".

form.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
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function change_ville()
{	
var xhr = getXhr();
xhr.onreadystatechange = function()
	{
	var rst = xhr.responseXML;
	var items=rst.getElementsByTagName('element');
	document.getElementById('ville').options.length=0;
 
	for(var i=0;i<items.length;i++)
	{
	var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
						document.getElementById('ville').options[i]=myOption;
	}
}
 
xhr.open("POST","ajax_villes.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('dept');
id_dept = sel.options[sel.selectedIndex].value;
xhr.send("id_dept="+id_dept);			
}
 
//affichage du select des départements + appel fonction
<?php 	
$select = "";
$sql = mysql_query("SELECT id, dept FROM dptf ORDER BY id");
$ligne = "<select name='dept' id='dept' ".iferror('dept')." onchange='change_ville();'>";
$ligne .= "<option>Sélectionnez un département</option>";
     while($row = mysql_fetch_assoc($sql)){
         ($_POST['dept'] == $row['id']) ? $select = "selected" : $select = "";
          $ligne .= "<option value='".$row['num']."' ".$select.">$row['dept']."</option>";
                    }
          $ligne .= "</select>";
           echo $ligne;	
?>
 
//select des villes
<select name="ville" id="ville"><option value="0">Sélectionnez une ville</option></select>

ajax_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
 
	header("Content-type:text/xml");
	echo '<?xml version="1.0" encoding="utf-8"?>';
    echo "<elements>";
	if(isset($_POST["id_dept"]))
	{
		include 'connect.php';
		//$res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom='".$_POST["Nom"]."' ORDER BY Prenom");
		$query  = "SELECT DISTINCT id, nom FROM villes WHERE cp LIKE '".$_POST['id_dept']."%' ORDER BY nom DESC"; 
		$result = @mysql_query($query); 
		while($row = mysql_fetch_assoc($result))
		{
	    echo '<element>';
            echo "<option>".$row["nom"]."</option>";
            echo '<valeur>'.$row["id"].'</valeur>';
            echo '</element>';
		}
	}
	echo "</elements>";

Je ne comprends pas 2 choses :
1- Lorsque le select "ville" se garnit dynamiquement, le curseur se positionne automatiquement au dernier élément de la liste au lieu du 1er.
2- Même question que post original : comment je récupère la valeur de "ville" pour la présélectionner si le formulaire est posté avec des erreurs ? Je n'ai pas vu cet aspect dans le post.

Merci d'avance.

[andry.aime]

Re,

1- Lorsque le select "ville" se garnit dynamiquement, le curseur se positionne automatiquement au dernier élément de la liste au lieu du 1er.

Code :

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

1
2
if(document.getElementById('ville').options.length>0)
{document.getElementById('ville').options[0].selected=true}

2- Même question que post original : comment je récupère la valeur de "ville" pour la présélectionner si le formulaire est posté avec des erreurs ?

Lors de la génération de la page, tu remplis le select "ville" ensuite pour présectionner, la réponse est sur la FAQ.

[renaud26]

Tout d'abord, merci de prendre le temps de me répondre.

Pour le 1er cas (liste des villes inversée), c'est impec.
Pour ce qui du préselect après la soumission du form, tu dis :

Lors de la génération de la page, tu remplis le select "ville" ensuite pour présectionner, la réponse est sur la FAQ.

La FAQ explique le pré-select. Je l'utilise partout dans mes selects, pas de souci avec ça. D'ailleurs j'arrive bien à pré-sélectionner le département. Ce que je ne parviens pas à faire, c'est recharger la liste des villes correspondant au département choisi.

Et pour finir, la fonction JS retourne l'erreur "rst is null" sur FF à cette ligne :

Code :

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

1
2
 
var items = rst.getElementsByTagName('element');

Je présume que c'est parce que <element> se trouve dans le fichier "ajax_ville.php" et que :

Code :

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

1
2
 
xhr.open("POST","ajax_villes.php",true);

est situé à la fin de la fonction. Mais je ne suis vraiment pas sûr...

[andry.aime]

Re,

Ce que je ne parviens pas à faire, c'est recharger la liste des villes correspondant au département choisi.

Appelles la fonction change_ville() dans le onload du body.

Et pour finir, la fonction JS retourne l'erreur "rst is null" sur FF à cette ligne

Code :

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

1
2
3
4
5
6
7
8
9
10
	document.getElementById('ville').options.length=0;
if(rst.getElementsByTagName('element'))
{
var items=rst.getElementsByTagName('element');
	for(var i=0;i<items.length;i++)
	{
	var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true);
	document.getElementById('ville').options[i]=myOption;
	}
}

Même si le xhr.open se situe après le onreadystatechange, cela ne pose aucun problème.