[AJAX] XMLHttpRequest avec select et objet Option

Version imprimable

Voir 40 message(s) de cette discussion en une page

03/03/2010, 20h00
Bovino

Citation:

Envoyé par E.Bzz

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:

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 ;)
04/03/2010, 13h33
renaud26
Bonjour à vous, désolé si je réponds tardivement : je n'ai pas reçu les emails d'avis.

Citation:

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

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

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

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 ?
8O
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.
:arf:
04/03/2010, 15h19
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+

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:

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:

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.

04/03/2010, 15h51
E.Bzz

Citation:

Envoyé par renaud26

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:

onchange="alert(this.value)"

dans ton tag <select>

A+
04/03/2010, 16h35
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:

1 2 3 echo '<option>'.$row["nom"].'</option>'; echo '<valeur>'.$row["id"].'</valeur>';
C'est bien ce qu'on lit, non ?
04/03/2010, 16h47
E.Bzz
Citation:

Envoyé par renaud26

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 :oops:

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

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+
04/03/2010, 17h00
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:

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:

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

En remontant à ton post #15 :
Code:

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+

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:

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...

04/03/2010, 17h31
E.Bzz

Citation:

Envoyé par renaud26

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:

if(!ville_choisie.length)

au lieu de

Code:

if(ville_choisie == null)

?

A+
04/03/2010, 17h50
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 !

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:

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+.

05/03/2010, 08h05
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:

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".
05/03/2010, 08h11
andry.aime
Re,
Faits

Code:

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

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

1 2 alert(ville_choisie);
après la boucle.
05/03/2010, 08h27
renaud26

Yeah :D

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.
05/03/2010, 08h34
andry.aime

Citation:

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+.

Voir 40 message(s) de cette discussion en une page