[DOM] Liste liées avec ajax

Version imprimable

26/01/2009, 13h25
lenissart

[DOM] Liste liées avec ajax

Bonjour,

Ayant besoin de listes liées pour un choix de région/département (qui ne proposerai donc que les départements de la région séléctionnée), j'ai trouvé un tutoriel.

J'ai choisi d'utiliser la méthode avec AJAX.

Aucun problème pour implanter ces scripts dans mon formulaire, mais une chose étrange qui me pose problème : impossible de récupérer la value du champ de département, bien que celui ci soit bien visible sur le formulaire. D'ailleurs, les modifications dues au choix d'une région ne sont pas visible sur le code source bien que la liste des département soit mise à jour sur le menu déroulant du formulaire.

Savez vous d'où vient ce problème ? Comment récupérer cette valeur du champ département ?

merci beaucoup !
26/01/2009, 13h33
le_chomeur

essaye de récupérer le code généré , ou alors de trouver une erreur javascript :)

sous firefox : une fois tes listes chargées a l'écran , fais une sélection du texte avant et après , puis click droit et code source de la sélection :)

ps : ne post pas tous les départements ;)

Code source avant sélection d'une région :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<tr>
        <td>Région <span class="text_orange">*</span></td>
 
        <td>
		<select name="region" id="region" onchange="getDepartements(this.value);">
      		<option value="">- - - Choisissez une région - - -</option><option value="1">Alsace</option><option value="2">Aquitaine</option><option value="3">Auvergne</option><option value="4">Basse Normandie</option><option value="5">Bourgogne</option><option value="6">Bretagne</option><option value="7">Centre</option><option value="8">Champagne Ardenne</option><option value="9">Corse</option><option value="10">Franche Comte</option><option value="11">Haute Normandie</option><option value="12">Ile de France</option><option value="13">Languedoc Roussillon</option><option value="14">Limousin</option><option value="15">Lorraine</option><option value="16">Midi-Pyrénées</option><option value="17">Nord Pas de Calais</option><option value="18">P.A.C.A</option><option value="19">Pays de la Loire</option><option value="20">Picardie</option><option value="21">Poitou Charente</option><option value="22">Rhone Alpes</option></select></td>
 
</tr>
<tr>
      <td>Département <span class="text_orange">*</span></td>
      <td><span id="blocDepartements"></span></td>
</tr>

Code source après choix d'une région :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
<tr>
       <td>Région <span class="text_orange">*</span></td>
 
       <td>
		<select name="region" id="region" onchange="getDepartements(this.value);">
      		<option value="">- - - Choisissez une région - - -</option><option value="1">Alsace</option><option value="2">Aquitaine</option><option value="3">Auvergne</option><option value="4">Basse Normandie</option><option value="5">Bourgogne</option><option value="6">Bretagne</option><option value="7">Centre</option><option value="8">Champagne Ardenne</option><option value="9">Corse</option><option value="10">Franche Comte</option><option value="11">Haute Normandie</option><option value="12">Ile de France</option><option value="13">Languedoc Roussillon</option><option value="14">Limousin</option><option value="15">Lorraine</option><option value="16">Midi-Pyrénées</option><option value="17">Nord Pas de Calais</option><option value="18">P.A.C.A</option><option value="19">Pays de la Loire</option><option value="20">Picardie</option><option value="21">Poitou Charente</option><option value="22">Rhone Alpes</option></select></td>
 
</tr>
<tr>
       <td>Département <span class="text_orange">*</span></td>
       <td><span id="blocDepartements">
 
         <select name="departement" id="departement">
         <option value="19">Corrèze (19)</option>
         <option value="23">Creuse (23)</option>
         <option value="87">Haute Vienne (87)</option>
         </select></span></td>
</tr>

A prioris, c'est exactement ce que je voudrai obtenir, pourtant un $_POST["departement"] donne toujours un résultat vide ....

26/01/2009, 14h33
le_chomeur

il te faut créer ta liste par le dom et non pas via le innerHTML.

au moment ou tu récupères tes informations , remplit ta liste en dom , va lire cet article / post :

http://www.developpez.net/forums/d53...ynamique-form/
26/01/2009, 15h17
lenissart

Question bète (:))
en quoi l'utilisation du dom va-t-elle changer quelque chose ? Celà ne me dit pas pourquoi ce code source à prioris bon n'est pas pris en compte.

Sinon, ton lien est quand même bien compliqué !
Je suppose qu'une utilisation beaucoup plus simple du dom pourrait être utilisée. En tout cas je ne sais pas par où commencer pour comprendre ce que je suis sencé modifier pour intégrer des appels au dom ici :aie:
26/01/2009, 15h22
le_chomeur

pour t'aider a comprendre , fais un test tout bète :

charge un simple champs text dans une div via ajax , post ton formulaire ...

Maintenant créer un champs text en dom , et post ton formulaire ;)

pour ton cas il te suffira de récupérer un tableau sous forme de hash , genre :

{{"value":"valeur","text":"le département"}{"value":"valeur","text":"le département"}}

et de parser coté js pour créer tes options :)

Dans ton lien je vois le bout de code suivant :
Code:

1 2 3 4 5 var myselect= $C({'obj':'select'}) ; $C({'obj':'option', 'value':'1','innerHTML':'option 1'}) ; $C({'obj':'option', 'value':'2','innerHTML':'option 2'}) ; $Close(myselect);
Est-ce que ce n'est pas ce que je cherche ? Comment l'adapter ?

(PS : je comprends les principes de ce que tu m'expliques, mais je connais simplement quelques rudiments de javascript et pour ajax, mon expérience se résume au copier/coller de ce script , donc pour une refonte compète du truc en intégrant des contructions complexes comme celle là, on va dire que je patauge légèrement .... :D)

tout a fait :)
Code:

1 2 3 4 5 6 //Identification de l'objet dans lequel ajouter tes éléments option var myselect= $C({'obj':'select'}) ; //Boucle a créer qui sera ton tableau de donnée $C({'obj':'option', 'value':mesOptions[0][0] ,'innerHTML':mesOptions[0][1]}) ; //Fermeture de balise select $Close(myselect);
coté php tu devra généré un tableau contenant la valeur et le texte ( tableau a 2 dimensions, puis au retour ajax :

Code:

var mesOptions = eval(retourajax);

voila :)

26/01/2009, 17h08
lenissart

J'ai la sensation d'avoir tout compris, et pourtant ça reste du chinois absolu dans la globalité :D

Pour faire un résumé de ce que je pense avoir compris (et que j'éssai de faire sans succès) :

- Le formulaire est affiché sans région sélectionnée
- L'utilisateur choisi une région
- La modification du select entraine l'exécution d'une fonction javascript/ajax
- Cette fonction ajax envoie une requête au serveur en appelant le fichier 'departement.php?idr=blabla' avec blabla étant le numéro de la région sélectionnée
- le script departement.php renvoi un tableau à 2 dimensions avec les numéros et noms de tous les départements de la région
- on crée notre select de départements à partir de ces résultats
- on affiche notre select via le DOM

Je suppose que ça doit être plus ou moins ça.
Maintenant : Je ne sais pas comment faire transiter le résultat de département.php , puis l'afficher ...

Pour le moment, departement.php est ponctué d'un

Code:

echo $liste

$liste contenant le tableau à 2 dimension précité. (je ne mets pas le code car ce n'est pas ce genre de choses qui me pose problème)

Je parviens donc à lancer cette requete, mais je ne sais pas comment réceptionner le résultat.
un "var listDept = requete.responseText;" me donne "Array", mais rien qui ressemble à un tableau de donnée. existe-t-il un responseCode ou un truc dans le genre :D
Comment récupérer ça comme étant un tableau ?

Une fois que j'aurai un tableau de données, comment mettre mon myselect dans mon formulaire. (car je pense reussir à créer les éléments dom correct via le code donné plus haut , mais je n'ai pas la moindre idée de la manière de procéder pour l'insérer dans mon code)

(Je suis vraiment désolé et je vous remercie infiniment pour l'aide. N'ayant pas eu d'apprentissage là dessus, ce sont les choses les plus insignifiantes qui me posent problème car je n'ai absolument aucune base au niveau des fonctions simplissimes à utiliser).