[AJAX] Initialisation de liste multiple

**Alex70** · 25/03/2008, 15h44

Bonjour a tous, voilà j'ai suivi les différents tuto du site, excellent d'ailleur pour commencer mais une question me tracasse et la solution qui va avec aussi...

Ma première page :

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
 
<html>
 <head>
 
<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 { // XMLHttpRequest non supporté par le navigateur
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
				   xhr = false;
				}
                                return xhr;
			}
 
function go()
{
var xhr = getXhr();
 
xhr.onreadystatechange = function()
	{
	if(xhr.readyState == 4 && xhr.status == 200)
	  {
	leselect = xhr.responseText;
	document.getElementById('cat2').innerHTML = leselect;
		}
 
	}
 
xhr.open("POST","categorie2.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('cat1');
cat1 = sel.options[sel.selectedIndex].value;
xhr.send("cat1="+cat1);
}
 
function goesp()
{
var xhr = getXhr();
 
xhr.onreadystatechange = function()
	{
	if(xhr.readyState == 4 && xhr.status == 200)
	  {
	leselect = xhr.responseText;
	document.getElementById('cat3').innerHTML = leselect;
		}
 
	}
 
xhr.open("POST","categorie3.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel2 = document.getElementById('catr2');
catr2 = sel2.options[sel2.selectedIndex].value;
xhr.send("catr2="+catr2);
}
 
</script>
 
 
 
 
 
 
</head>
	<body>
		<form>
 
<fieldset style="width: 500px">
 
<legend>Catégories</legend>
 
<label>Cat 1</label>
 
<select name='cat1' id='cat1' onchange='go()'>
<option value='-1'>Aucun</option>
<?
mysql_connect("localhost","root","");
mysql_select_db("slayer");
$res = mysql_query("SELECT * FROM categorie  ORDER BY categorie1");
while($row = mysql_fetch_assoc($res))
{
echo "<option value='".$row["categorie1"]."'>".$row["categorie1"]."</option>";
}
?>
</select>
 
<label>Cat 2</label>
 
<div id='cat2' style='display:inline'>
<select name='cate2'>
<option value='-1'>Choisir la cat1</option>
</select>
</div>
 
<label>Cat 3</label>
<div id='cat3' style='display:inline'>
<select name='cat3'>
<option value='-1'>Choisir la cat2</option>
</select>
</div>
 
</fieldset>
 
       </form>
	</body>
</html>

page 2 :

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
<?php
 
echo "<select name='catr2'  id='catr2' onchange='goesp()'>";
 
if(isset($_POST["cat1"]))
{
 
mysql_connect("localhost","root","");
mysql_select_db("slayer");
$val1=$_POST["cat1"];
 
$res = mysql_query("
SELECT * FROM categorie2 WHERE cat1='".$val1."' ORDER BY cat2");
 
while($row = mysql_fetch_assoc($res))
{
echo "<option value='".$row["cat2"]."'>".$row["cat2"]."</option>";
}
 
}
 
echo "</select>";
?>

page 3 :

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
<?php
 
echo "<select name='cat3'>";
 
if(isset($_POST["catr2"]))
{
 
mysql_connect("localhost","root","");
mysql_select_db("slayer");
$val2=$_POST["catr2"];
 
$res = mysql_query("
SELECT * FROM categorie3 WHERE cat2='".$val2."' ORDER BY cat3");
 
while($row = mysql_fetch_assoc($res))
{
echo "<option value='".$row["cat3"]."'>".$row["cat3"]."</option>";
}
 
}
 
echo "</select>";
?>

Ma question comment faire pour que lorsque je change la liste 1, la liste 3 s'initalise aussi ?
Tout fonctionne parfaitement sinon mais ce n'est pas top de voir :
Categorie 1 categorie 2 categorie 3
Achat------- Four----------choisir categorie 2...

J'éspère que l'on c'est compris si quelqu'un peu m'aider....

Merci d'avance

**E.Bzz** · 25/03/2008, 16h01

Bonjour,

Envoyé par Alex70

Ma question comment faire pour que lorsque je change la liste 1, la liste 3 s'initalise aussi ?

En retour, ma question est : Pourquoi ?

Ton script actuel alimente la liste 2 en fonction du choix de la liste 1.
Or ta liste 3 dépend d'un choix dans la liste 2.

A priori (sauf règle que tu n'aurais pas donnée), lors de l'alimentation de la liste 2 (ton traitement actuel), tu ne connais pas encore le choix qui sera fait dans la liste 2, pour le passer en paramètre au second appel Ajax qui alimentera la liste 3.

C'est plus un problème logique que technique

A+

**Alex70** · 25/03/2008, 16h04

Ce n'est pas un problème a proprement parler mais lorsque je change ma liste 1 ma liste 2 se positionne directement sur une valeur donc pourquoi ne pas directement mettre la troisième liste directement sur la valeur associé de la liste 2 ?

Voila ce que j'aimerais faire.

**E.Bzz** · 25/03/2008, 16h09

Envoyé par Alex70

Ce n'est pas un problème a proprement parler mais lorsque je change ma liste 1 ma liste 2 se positionne directement sur une valeur donc pourquoi ne pas directement mettre la troisième liste directement sur la valeur associé de la liste 2 ?

Parce que c'est la règle que tu n'avais effectivement pas donnée

Il suffit que tu lances ton 2° appel Ajax (goesp() donc) à la fin de la fonction onreadystatechange du 1° appel (dans go() ), en lui passant bien sûr en paramètre la valeur de liste 2 sur laquelle tu te positionnes par défaut ...

A+

**Alex70** · 25/03/2008, 16h12

Aors merci de la réponse pas sur d'y arrivé mais je vais essayé comme je peux ^^

Le souci est puije recuperais la valeur de la liste 2 directement ?
puicequ'il y a XX choix possible dans la liste une.

Trop complexe j'abandonne ou tu peux m'aider ?

ps: on sait peut etre mal compris sur mon message précédent

**E.Bzz** · 25/03/2008, 16h24

Envoyé par Alex70

ps: on sait peut etre mal compris sur mon message précédent

Le souci est puije recuperais la valeur de la liste 2 directement ?
puicequ'il y a XX choix possible dans la liste une.

Ta fonction goesp() le faisait déjà

EDIT : là :

Code :

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

1
2
3
sel2 = document.getElementById('catr2');
catr2 = sel2.options[sel2.selectedIndex].value;
xhr.send("catr2="+catr2);

A+

**E.Bzz** · 25/03/2008, 16h15

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
function go()
{
var xhr = getXhr();
 
xhr.onreadystatechange = function()
	{
	if(xhr.readyState == 4 && xhr.status == 200)
	  {
	leselect = xhr.responseText;
	document.getElementById('cat2').innerHTML = leselect;
        setTimeout("goesp()", 100);
		}
 
	}
...

Ca devrait suffire

A+

**Alex70** · 25/03/2008, 16h17

Oua merci sa marche meme si je comprend pas la logique...

je vais chercher pour comprendre mais un grand merci a toi.

Finalement Ajax c'est fouce qu'on peut faire avec...

[AJAX] Initialisation de liste multiple

JavaScript

Vue hybride

Discussions similaires

Partager

Partager