Discussion :

[Bovino]

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;

+1
D'où mon insistance à répéter que contrairement à PHP, les tableaux associatifs n'existent pas en JavaScript

[renaud26]

Bonjour à vous, désolé si je réponds tardivement : je n'ai pas reçu les emails d'avis.

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

Ben si, il y a des chances que je confonde...


Mais comment trouver l'indice de la ligne qui correspond à l'id de la ville pour le mettre selected=true ?

Code :

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

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

Si je mets le code ci-dessus, 'valeur' c'est bien le value du select, non ?

Le pire c'est que ça fonctionne ! mais bon, les alertes JS dans le navigateur, ça fait pas propre...

[EDIT] : non, je dis des âneries : ça ne fonctionne pas. la ville choisie se trouve bien sélectionnée....mais elle est dernière de la liste et toutes les villes qui devraient venir ensuite dans la liste de s'affichent pas.

[E.Bzz]

Il suffirait que tu définisses l'id (au sens BDD) de la ville comme value de chaque option, il me semble.
Dans ton script d'alimentation de ta liste, il suffirait de tester la value pour passer la bonne ligne en "selected" ...

A+

[renaud26]

Ben...c'est ce que je fais, du moins il me semble :

le fichier ajax_ville qui fait la requête et qui est en relation avec la fonction js:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
$query  = "SELECT DISTINCT id, nom FROM maps_ville WHERE cp LIKE '".$_POST['id_dept']."%' ORDER BY url"; 
$result = @mysql_query($query); 
echo '<element><option>Sélectionnez une ville</option><valeur>0</valeur></element>';
while($row = mysql_fetch_assoc($result))
{
echo '<element>';
echo '<option>'.$row["nom"].'</option>';
echo '<valeur>'.$row["id"].'</valeur>';
echo '</element>';
}

et la boucle de 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
 
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');
	alert(items.length);
 
                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.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);

Note : dans la fonction JS, j'ai enlevé la portion de code qui ferait le préselect de la ville choisie...Car je suis un peu perdu et ne sais plus trop comment faire.

[E.Bzz]

Ben...c'est ce que je fais, du moins il me semble

De ce que je vois, on dirait plutôt que tu mets 2 fois le "nom" (en text et en value).
Pour vérifier, ajoute un

Code :

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

onchange="alert(this.value)"

dans ton tag <select>

A+

[renaud26]

Oui c'est bien l'ID de la ville qui sort en alert.
Et c'est bien les noms des villes qui s'affichent dans le select.

Mais dans le fichier ajax.php :

Code :

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

1
2
3
 
            echo '<option>'.$row["nom"].'</option>';
            echo '<valeur>'.$row["id"].'</valeur>';

C'est bien ce qu'on lit, non ?

[E.Bzz]

C'est bien ce qu'on lit, non ?

Dans tes codes JS et PHP, oui : au temps pour moi, j'ai mal lu ou me suis mélangé les pinceaux

Par contre, ici, il me semble apparaitre une confusion :

Code :

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

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

Ce que tu essayes de passer en "selected" est une entrée de ton XML et non une ligne du <select> ...

A+

[renaud26]

...Alors je sèche lamentablement.
Ce n'est pas dans la fonction JS qu'il faut passer la ville choisie en paramètre ?
Dans le php ?

Code :

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

1
2
3
 
            echo '<option>'.$row["nom"].' </option>';
            echo '<valeur>'.$row["id"].'</valeur>';

Dans ce genre de construction, je ne sais pas où mettre le :

Code :

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

1
2
 
($row['id'] == $ville_choisie) ? $select=" selected" : $select="";

[E.Bzz]

En remontant à ton post #15 :

Code :

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

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

Mais bon, dans cette version de ton code, tu sélectionnait d'office la 1° ligne du select (juste après ce passage) ...

A+

[renaud26]

Oui, j'ai ajouté, sur les conseils de andry.aime, cette portion de code, car lorsqu'on sélectionnait un département et que ses villes s'affichaient dans le select, la dernière était sélectionnée d'office....ce qui n'était pas pratique.

Du coup, pour le pré-select, j'ai mis que cette ligne ne s'exécute que si la var ville_choisie était vide. Ca donne ça, maintenant :

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
 
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;
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
document.getElementById('ville').options[i].selected = true;
}
 
if(ville_choisie == null){			
if(document.getElementById('ville').options.length>0){
document.getElementById('ville').options[0].selected=true;
					}
				}
			}
		}

Mais rien à faire : quand j'affiche le form en modif avec les données de la BDD et la ville choisie en paramètre, plus rien ne fonctionne, c'est la dernière ville de la liste qui est pré sélectionnée.

Ou la la...

[E.Bzz]

c'est la dernière ville de la liste qui est pré sélectionnée.

Alors, au moins pour cette partie là : as-tu essayé

Code :

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

if(!ville_choisie.length)

au lieu de

Code :

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

if(ville_choisie == null)

?

A+

[renaud26]

Oui, cela ne change rien : la portion de code n'est pas exécutée si ville_choisie est présente. J'ai aussi testé en la supprimant complètement : idem, on reste bloqué sur la dernière ville de la liste.

Un truc de dingue !

[andry.aime]

Re,
C'est normale qu'il selectionne la dernière ajouté, car après la selection il y encore ajout d'un ou plusieurs nouvelles options.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
var j=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;
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
j= i;
}
}
document.getElementById('ville').options[j].selected = true;

Comme ça, tu la selectionne après que toutes les options sont ajoutées.

A+.

[renaud26]

Bonjour et merci de te pencher à nouveau sur ce post,

En faisant de cette façon, la liste affiche bien les villes du département qui a été choisi - et qui est dans la table MYSQL - mais ça ne sélectionne pas la ville choisie qui est aussi dans la table et qui passe en param de la fonction.

Le select reste sur "sélectionnez une ville".

Mais j'ai fait ce test :

Code :

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

1
2
3
4
5
6
7
 
if(items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue == ville_choisie){
alert('oui');
j= i;
}else{
alert('non');
}

Bon, ça a un peu torturé FF à cause de la boucle, je suppose...mais le résultat est "non".

[andry.aime]

Re,
Faits

Code :

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

alert(document.getElementById('ville').options[i].value);

dans la boucle for pour vérifier ses valeurs.
Puis

Code :

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

1
2
 
alert(ville_choisie);

après la boucle.

[renaud26]

Yeah

Ton test m'a permis de voir que la var php ville_choisie ne passait plus en param de la fonction JS ! (pb de session je pense). J'ai corrigé et ton code fonctionne à merveille, que ce soit en création avec un formulaire vierge (ce n'est plus la dernière ville de la liste qui s'affiche en 1er) et en modification : la ville choisie est bien pré sélectionnée.

Mille merci.
A toi et à ceux qui ont contribué à ce post.
J'y vois plus clair dans les XMLHttpRequest.

Bonne journée à tous.

[andry.aime]

Ton test m'a permis de voir que la var php ville_choisie ne passait plus en param de la fonction JS

C'est pour ça qu'on demande toujours le code HTML généré mais pas le code PHP pour debuguer un javascript.
A+.