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.

[renaud26]

Bon, j'ai fait les modifs que tu m'as indiquées :

Pour l'erreur console FF :

Code :

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

1
2
3
4
5
6
if(rst.getElementsByTagName('element')) *
{
....

}

Mais l'erreur est toujours là ! sur la ligne que j'ai ajoutée * ... rst est toujours null.

Ensuite, pour le préselect des villes :

J'ai, comme tu l'as dit, appelé la fonction change_ville dans le body onload, et comme c'est transmis au formulaire qui se trouve dans ajax_villes.php, ben j'ai transmis sa valeur dans l'appel fonction :

Code :

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

1
2
 
<body onload="change_villes($_POST['ville'])">

dans la fonction JS elle même :

Code :

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

1
2
3
4
5
6
7
8
9
 
function change_ville(ville_choisie){
...
...
if(ville_choisie != ""){
data = "id_dept="+id_dept+"&id_ville="+ville_choisie;
}
xhr.send(data);	
}

Donc la fonction change_villes a bien transmis la valeur à ajax_ville et je la récup avec $_POST['id_ville']. Mais là, je coince, car je ne sais pas appliquer le pré-select sur la structure particulière de ce select :

Code :

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

1
2
3
4
5
6
7
8
9
 
while($row = mysql_fetch_assoc($result))
{
(isset($_POST['id_ville']) && $_POST['id_ville'] == $row['id']) ? $select = "selected" : $select="";
echo '<element >';
echo '<option '.$select.'>'.$row["nom"].'</option>';
echo '<valeur>'.$row["id"].'</valeur>';
echo '</element>';
}

Que je mette le $select dans le TAG <element> ou <option> ou <valeur>, j'ai toujours l'erreur "xml mal formé".

[renaud26]

Bon, après m'être tourné la tête dans tous les sens...j'ai trouvé une soluce pour les préselect villes. Sans toucher au fichier ajax_ville, sans ajouter de $select="selected" et tout le bin's.

1- Je passe l'id de la ville dans l'appel de la fonction

Code :

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

1
2
 
<body onload="change_ville($_POST['ville'])">

2 dans 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
31
32
33
34
35
36
37
38
39
40
41
 
function change_ville(ville_choisie)
{	
var xhr = getXhr();
var data;
xhr.open("POST","ajax_villes.php",true);
xhr.onreadystatechange = function()
{
document.getElementById('ville').options.length=0;
var rst = xhr.responseXML;
if(rst.getElementsByTagName('element')) //TJRS EN ERREUR !!!
	{
	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,true,true);
 
document.getElementById('ville').options[i]=myOption;
 
//AJOUT DE CETTE CONDITION POUR LE PRESELECT		
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie)
{
items[i].getElementsByTagName('valeur')[ville_choisie].selected = true;
}
 
 
if(document.getElementById('ville').options.length>0)
{
document.getElementById('ville').options[0].selected=true;
}
}
}
}
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('dept');
id_dept = sel.options[sel.selectedIndex].value;
data = "id_dept="+id_dept;
xhr.send(data);			
}

Je ne sais pas si c'est très optimisé...mais ça fonctionne.
Reste l'erreur "rst is null"...

[andry.aime]

Re,
Installe Firebug sur firefox pour voir cet erreur .
Je ne crois pas que rst est null alors que l'ajout des options à partir des éléments de rst se fasse bien (ce qui veut dire que rst n'est pas null).

[renaud26]

Bonjour,

Je viens d'installer Firebug. Il me dit la même chose que la console !

Code :

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

1
2
3
 
if(rst.getElementsByTagName('element')) 
rst is null

Peut-être dû à la structure de mon site ?
La page du formulaire qui appelle les fonctions JS est en include de la page qui les contient :

Code :

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

1
2
3
4
5
6
7
 
<head>
Fonctions JS
</head>
<body>
<?php include("formulaire.php"); ?>
</body>

[Bovino]

Reste l'erreur "rst is null"...

Salut.

Cette erreur semble normale puisqu'apparemment, tu ne testes pas le readySate et le status dans onreadystatechange, donc tu essayes de manipuler la réponse du serveur avant de l'avoir reçue

[renaud26]

Bon sang ! mais c'est bien sûr !

Un simple :

Code :

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

1
2
3
4
5
6
7
 
var rst = xhr.responseXML;
if(rst)
{
var items=rst.getElementsByTagName('element');
...
}

Fait l'affaire.
Merci à toi et à andry.aime pour son aide précieuse.

[andry.aime]

Euh,
Bovino veut dire que:

Code :

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

1
2
3
4
5
6
7
8
xhr.onreadystatechange = function()
{
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('ville').options.length=0;
var rst = xhr.responseXML;
............
}
}

[renaud26]

Effectivement...
J'y étais allé un peu vite.


Merci.

[renaud26]

Encore crié victoire trop vite...

Je suis toujours sur la fonction change_ville...
Et le pré-select lorsque le formulaire a été posté avec des erreurs, et de façon a ré afficher le choix de la ville.

Donc je j'appelle la fonction dans le body onload si j'ai un $_POST et je lui passe le nom de la ville en param :

Code :

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

1
2
 
<body onload="change_ville($_POST['ville'])">

Et ça fonctionne...mais il y a une erreur dans firebug :

Code :

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

1
2
 
items[i].getElementsByTagName("valeur")[ville_choisie] is undefined

Voici ma fonction :

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
function change_ville(ville_choisie)
{	
	var xhr = getXhr();
	var data;
	xhr.open("POST","ajax_villes.php",true);
	xhr.onreadystatechange = function()
	{
		if(xhr.readyState == 4 && xhr.status == 200)
		{
		document.getElementById('ville').options.length=0;
		var rst = xhr.responseXML;
		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,true,true)
							
		document.getElementById('ville').options[i] = myOption;
		if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
		items[i].getElementsByTagName('valeur')[ville_choisie].selected = true; // la ligne qui bugue
				}
							
				if(document.getElementById('ville').options.length>0){
					document.getElementById('ville').options[0].selected=true;
				}
			}
		}
	}
				
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('dept');
	id_dept = sel.options[sel.selectedIndex].value;
	data = "id_dept="+id_dept;
	xhr.send(data);			
}

Est ce que quelqu'un peut expliquer pourquoi cette erreur dans firebug alors que j'ai bien le résultat attendu à l'écran ?
Je vous remercie d'avance.

[andry.aime]

Re, remplace la ligne par

Code :

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

document.getElementById('ville').options[i].selected=true;

Remarque: ne mets pas une mise en forme dans la balise code, Ajoutes seulement des commentaires.

[renaud26]

Bonjour, merci de ton retour.

En mettant cette ligne :

Code :

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

1
2
3
4
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
document.getElementById('ville').options[i].selected=true;
}

Plus d'erreur dans Firebug...mais plus de préselect de la ville non plus.

En mettant ça :

Code :

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

1
2
3
4
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
document.getElementById('ville').options[ville_choisie].selected=true;
}

J'ai le préselect ville OK...mais une erreur dans Firebug.
Va comprendre...

Noté pour ce qui concerne la mise en form dans la balise code.

[E.Bzz]

Bonjour,

En mettant ça :

Code :

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

1
2
3
4
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
document.getElementById('ville').options[ville_choisie].selected=true;
}

J'ai le préselect ville OK...mais une erreur dans Firebug.

ville_choisie étant un paramètre de ta fonction, c'est du caractère ==>

Code :

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

document.getElementById('ville').options[parseInt(ville_choisie, 10)].selected=true;

A+

[renaud26]

Merci, Ebzz de ton intervention.

Ta suggestion sort une erreur, cette fois inexpliquée :

Code :

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

1
2
 
document.getElementById(

pour la ligne :

Code :

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

1
2
3
4
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
document.getElementById('metier').options[parseInt(ville_choisie, 10)].selected=true;
}

Mais euh...je ne comprends pas pourquoi ta phrase :

ville_choisie étant un paramètre de ta fonction, c'est du caractère ==>

Car la ville_choisie est bien passée en paramètre de la fonction, mais c'est un nombre. C'est l'ID de la ville.

[E.Bzz]

Car la ville_choisie est bien passée en paramètre de la fonction, mais c'est un nombre.

Au temps pour moi : je n'avais pas vu l'appel (pas tout lu )
Je croyais que tu récupérais la value du select précédent (les values sont toujours de type caractère)

Du coup, ce qui m'inquiète c'est

C'est l'ID de la ville.

Ça voudrait dire que l'id de chaque ville correspond à son n° d'ordre dans la liste déroulante ?

Ça me parait bien improbable (surtout dans le cas de liste liées)

Ne confondrais-tu pas "id de la ville" et "indice dans le select" ?

L'id de la ville est celui qui te permet d'identifier une ville donnée dans ta bdd (ville_choisie)
L'indice de la ville dans le select n'est que son n° d'ordre dans la liste à un moment donné.
C'est ce dernier que tu dois utiliser dans

Code :

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

document.getElementById('ville').options[indice_de_la_ligne].selected=true;

A+