[AJAX] 3 listes liées en ajax

**kitten13** · 20/05/2009, 17h13

Je cherche à liée 3 Listes en ajax, j'ai suivi le tuto http://siddh.developpez.com/articles/ajax/#LIV-A mais pour ajouter une troisième listes dépendante de la 2 ème je patauge.

Avez vous un liens, tuto sur 3 listes liées ?

merci pour votre aide

**emmanuel.remy** · 20/05/2009, 18h49

Salut,

Si tu réussis à lier liste1 et liste2, pourquoi ne peux tu pas lier liste2 et liste3 ? Il doit manquer quelque chose dans ta question

ERE

**kitten13** · 21/05/2009, 11h28

Oui effectivement je suis pas très claire dans mes propos, en faite je reussi à charger la deuxième liste en fonction du choix de la première mais je n'arrive pas à en faire autant pour la troisième.

Concrètement voici un exemple :

fichier lieu.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
 
			function depart(){
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						document.getElementById('cityid').innerHTML = leselect;
					}
				}
 
				xhr.open("POST","departement.php",true);
 
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('countryid');
				countryid = sel.options[sel.selectedIndex].value;
				xhr.send("countryid="+countryid);
			}
 
 
 
			function ville(){
				var xhr = getXhr();
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						document.getElementById('arealist').innerHTML = leselect;
					}
				}
 
				xhr.open("POST","ville.php",true);
 
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				sel = document.getElementById('cityid');
				cityid = sel.options[sel.selectedIndex].value;
				xhr.send("cityid="+cityid);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Selectionner votre lieu</legend>
				<label>region</label>
				<select name='countryid' id='countryid' onchange='depart()'>
					<option value='0'>Choisir la region</option>
					<?
						$res = mysql_query("SELECT countryid, countryname
										FROM $t_countries ct
 
										ORDER BY countryname");
 
 
						while($row=mysql_fetch_array($res))
								{
								echo "<option value=\"$row[countryid]\"";
								if ($row['countryid'] == $_REQUEST['countryid']) echo " selected";
								echo "> $row[countryname]</option>";
								}
					?>
				</select>
				<br><br>
				<label>departement</label>
				<div id='cityid' style='display:inline'>
				<select name='cityid' id='cityid' onchange='ville()'>
					<option value='-1'>Choisir un departement</option>
				</select>
				</div>
				<br><br>
				<label>villes</label>
				<div id='arealist' style='display:inline'>
				<select name='arealist'>
					<option value='-1'>Choisir une ville</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

le fichier departement.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
 
			<?php
                        if(isset($_POST["countryid"])){
    
                        $sql = ("SELECT cityid, cityname FROM $t_cities WHERE countryid = ".$_POST["countryid"]." ORDER BY cityname");
                        $res = mysql_query($sql);
                        if (mysql_num_rows($res))
                        {
                        ?>
			<select name='cityid' id='cityid' onchange='go()'>
 
			<option value="" <?php if(!$data['cityid']) echo "selected"; ?>> <?php echo " <b> Choisissez le depart </b> "; ?> </option>
			<?php
                                $other_index = 1;
                                while ($row = mysql_fetch_array($res))
                                {
                                        $other_index++;
                                        echo "<option value=\"$row[cityname]\"";
                                        if ($data['cityid'] == $row['cityname']) { echo " selected"; $city_inlist = TRUE; }
                                        echo ">$row[cityname]</option>";
                                }
                        ?>
			<option value="" <?php if($data['cityid'] && !$city_inlist) echo "selected"; ?>>(<?php echo "Autre"; ?>)</option>
 
			</select>
 
			<?php
                                } 
                        }
                        ?>

et le fichier 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
20
21
22
23
24
25
26
27
28
29
30
31
 
			<?php
                        if(isset($_POST["cityid"])){
    
                        $sql = ("SELECT areaname FROM $t_areas WHERE cityid = ".$_POST["cityid"]." ORDER BY areaname");
                        $res = mysql_query($sql);
                        if (mysql_num_rows($res))
                        {
                        ?>
 
			<select name="arealist" onchange="javascript:if(this.value) { this.form.area.value=this.value; this.form.area.disabled=true; } else this.form.area.disabled=false;">
 
			<option value="" <?php if(!$data['area']) echo "selected"; ?>> <?php echo " <b> Choisissez la ville </b> "; ?> </option>
			<?php
                                $other_index = 1;
                                while ($row = mysql_fetch_array($res))
                                {
                                        $other_index++;
                                        echo "<option value=\"$row[areaname]\"";
                                        if ($data['area'] == $row['areaname']) { echo " selected"; $area_inlist = TRUE; }
                                        echo ">$row[areaname]</option>";
                                }
                        ?>
			<option value="" <?php if($data['area'] && !$area_inlist) echo "selected"; ?>>(<?php echo "Autre"; ?>)</option>
 
			</select>
 
			<?php
                                } 
                        }
                        ?>

J'essaie de comprendre mon erreur mais en vain, pourriez vous m'expliquer.

merci d'avance

**Bovino** · 21/05/2009, 12h10

Sujet récurent s'il en est... une petite recherche t'aurais permis d'apprendre que le name ne peut pas être affecté dynamiquement comme cela et que les événements (comme tout ce qui est JavaScript) n'est pas évalué !

**kitten13** · 21/05/2009, 13h39

Envoyé par Bovino

Sujet récurent s'il en est... une petite recherche t'aurais permis d'apprendre que le name ne peut pas être affecté dynamiquement comme cela et que les événements (comme tout ce qui est JavaScript) n'est pas évalué !

Je cherche, je m'intéresse, j'apprends, je code, peut être d'une mauvaise façon mais la motivation est là, pour être franche j'ai pas très bien saisie tes propos :

name ne peut pas être affecté dynamiquement comme cela et que les événements (comme tout ce qui est JavaScript) n'est pas évalué !

**Bovino** · 21/05/2009, 15h19

Tu peux regarder ici, ici ou ici par exemple

[AJAX] 3 listes liées en ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager