[AJAX] Select list et selected value

**Polymorph** · 12/10/2009, 19h53

Bonjour !

Voila j'essaie depuis ce matin de faire une liste chainer pour le pays département, region...

cela fonctionne ! mais parcontre dès que je soumet le formulaire il perd les values !

Voici mon code location.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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<?php
 
        header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
        header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
        header("Cache-Control: no-cache, must-revalidate");
        header("Pragma: no-cache");
        header("content-type: application/x-javascript; charset=utf-8");
 
        require("connect.php");
 
        $data = $_GET['data'];
        $val  = $_GET['val'];
 
        if($data == 'states')
        {
                echo "<select name=\"states\" onchange=\"dochange('region', this.value)\" class=\"location\">\n";
                echo "<option value='0'>Choose state</option>";
 
                foreach(MYSQLLocation::getCountries() as $country)
                {
                        echo '<option value="'.$country['id_country'].'">'.utf8_encode($country['fr'])."</option>\n";
                }
        }
 
        else if($data == 'region')
        {
                echo "<select name=\"regions\" onchange=\"dochange('departement', this.value)\" class=\"location\">\n";
                echo '<option value="0">Selectionnez une region</option>'."\n";
 
                foreach (MYSQLLocation::getRegions($val) as $region)
                {
                        echo '<option value="'.$region['id'].'">'.utf8_encode($region['name'])."</option>\n";
                }
        }
 
        else if($data == 'departement')
        {
                echo "<select name=\"departements\" onchange=\"dochange('city', this.value)\" class=\"location\">\n";
                echo '<option value="0">Chose a region</option>'."\n";
 
                foreach (MYSQLLocation::getDepartements($val) as $dep)
                {
                        echo '<option value="'.$dep['id'].'">'.$dep['id']." - ".utf8_encode($dep['name'])."</option>\n";
                }
        }
 
        else if($data == 'city')
        {
                echo '<select name="cities" class=\"location\">'."\n";
                echo '<option value="0">Selectionnez une Ville</option>'."\n";
 
                foreach (MYSQLLocation::getCities($val) as $city)
                {
                        echo '<option value="'.$city['id'].'">'.$city['zipcode'] . " - " .utf8_encode($city['city'])."</option>\n";
                }
        }
 
        echo "</select>\n";
 
?>

Mon fichier javascript :

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 getXHR()
{
   try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
   try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
   try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
   alert("XMLHttpRequest not supported");
   return null;
}
 
function dochange(src, val)
{
     var req = getXHR();
 
     req.onreadystatechange = function ()
     { 
          if (req.readyState == 4)
          {
               if (req.status == 200)
               {
                    document.getElementById(src).innerHTML=req.responseText;
               } 
          }
     };
 
     req.open("GET", "http://www.monsite.dev/ajax/location.php?data="+src+"&val="+val);
     req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
     req.send(null);
}
 
window.onLoad=dochange('states', -1);

et mon fichier php d'affichage (je met que la partie concerné)

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
<tr>
		<td>Pays : </td>
		<td>
			<div id="states">&nbsp;</div>
		</td>
	</tr>
 
 
	<tr>
	<td>Region : </td>
	<td><div id="region">
	<select disabled="disabled" class="location">
		<option value="0">Veuillez choisir un pays</option>
	</select>
		</div></td>
	</tr>
 
 
	<tr>
	    <td>Departement : </td>
	    <td>
		<div id="departement">
			<select disabled="disabled" class="location">
			<option value="">Veuillez choisir un departement</option>
			</select>
			</div>
		</td>
	</tr>
 
 
	<tr>
		<td>Ville : </td>
		<td>
		<div id="city">
		<select name="cities" disabled="disabled" class="location">
			<option value="">Veuillez choisir une ville</option>
		</select>
	</div></td>
</tr>

Je sais pas si c'est super clean mais trouver des dropdowns sur le net qui gère le selected j'ai pas trouver ! même au us

Donc si quelqu'un à un tuyau je suis prenneur

**E.Bzz** · 13/10/2009, 09h47

Bonjour,
je pense que c'est dû à la création de tes select via innerHTML.
Dans ce cas, le name est mal pris en compte, et comme c'est lui qui est utilisé pour la soumission du formulaire ...
Pour corriger ça, tu peux essayer dans un premier temps de remettre à jour le name juste après la création de la liste : ajoute un id au select (dans ton script de création PHP appelé par Ajax), puis, juste après le retour Ajax (à la fin du onreadystatechange), tu réaffectes le name

Code :

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

document.getElementById('id_select').name = 'name_du_select';

Si ça ne fonctionne pas (ou si tu préfères le DOM

), tu peux créer entièrement tes select grâce aux méthodes DOM. Ca devrait corriger le problème ...

A+

**E.Bzz** · 13/10/2009, 09h52

Une discussion qui explore le problème

A+

**Polymorph** · 13/10/2009, 10h44

Merci pourr ton aide !

je me suis mis à ajax y'a pas longtemps...
Je me suis renseigné d'après tes liens, je me rend compte que innerHTML n'est pas conseillé !

Je vais donc suivre ton conseille et le faire en dom ! j'ai pas mal utilisé la class DOMDocument de php je devrais pas être trop perdu ! (j'espère lol)

je vais refaire ça et je reviendrais en cas de problème ou pour donner la solution !

++

**andry.aime** · 13/10/2009, 11h18

Bonjour,

Envoyé par E.Bzz

ajoute un id au select (dans ton script de création PHP appelé par Ajax), puis, juste après le retour Ajax (à la fin du onreadystatechange), tu réaffectes le name

IE n'accepte pas la modification de l'attribut name d'un élément.
Tu dois l'affecter durant la création de l'objet, sinon il y avait une discussion sur le forum javascript, un membre a fait un petit bricolage,

Code :

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

setAttribute('Name','sonNom');

Le "N" en majuscule.

**E.Bzz** · 13/10/2009, 11h25

Envoyé par andry.aime

IE n'accepte pas la modification de l'attribut name d'un élément.

Exact

Kernelfailure utilise en fait un hack qui permet de le faire ...
C'est à ça que je pensais ...

Mais dans tous les cas (quoiqu'on en dise) la méthode DOM est préférable ...

A+

**E.Bzz** · 13/10/2009, 11h26

Envoyé par andry.aime

sinon il y avait une discussion sur le forum javascript

Oui, c'est le lien que j'avais donné ci-dessus, justement

A+

**Polymorph** · 13/10/2009, 12h15

Merci pour vos réponses !

Comme suis pas encore très alaise avec AJAX et le dom je voulais
savoir :

je construit mes selects avec le DOM dans le fichier location.php appeler
par le fichier js ?

ou je dois le faire dans le fichier js ?

**E.Bzz** · 13/10/2009, 13h47

Envoyé par Polymorph

je construit mes selects avec le DOM dans le fichier location.php appeler
par le fichier js ?

Non, tu dois le faire côté JS (forcément : c'est du Javascript).

Ton script PHP ne doit renvoyer, via Ajax, que les informations permettant à ton script JS de construire tes objets.

Tu peux par exemple utiliser un formatage JSon qui te permettra de renvoyer des couples attribut/valeur de plusieurs niveaux de manière structurées ...

A+

**Polymorph** · 13/10/2009, 14h12

ok !

donc si j'ai bien compris que cela fonctionne je remplace la ligne suivante :

document.getElementById(src).innerHTML = req.responseText;

par les methodes DOM ?

si je créer une fonction qui créer le DOM et je fais ça :

document.getElementById(src).appendChild(ma function);

Je vais juste le faire en DOM parce que déjà que je commence avec AJAX je galère un peu pour faire mes selects et JSON en plus ca rajoute une couche de complexité pour moi !

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
 
function dochange(src, val)
{
     var req = getXHR();
 
     req.onreadystatechange = function ()
     { 
    	 if (req.readyState == 4)
    	 {
    		 if (req.status == 200)
    		 {
    			 document.getElementById(src).innerHTML = req.responseText;
    		 } 
    	 }
	};
 
	req.open("GET", "http://www.beeluv.home/ajax/location.php?data="+src+"&val="+val);
	req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");
	req.send(null);
 
 
}

**andry.aime** · 14/10/2009, 11h18

Bonjour,
Vire le

req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8");

Tu pourras avoir des ennuies avec la methode GET.
Tu peux t'inspirer de cette discussion mais on a utilisé un retour XML mais pas JSON.
http://www.developpez.net/forums/d77...te-liees-ajax/

[AJAX] Select list et selected value

AJAX

Discussions similaires

Partager

Partager