4 pièce(s) jointe(s)
[AJAX] Listes liées dynamiques. 2eme liste pas à jour.
Bonjour à tous !
Je réalise des listes liées dynamiques.
J'ai un souci, juste après le choix de la 1er boîte déroulante :
La 2e liste n'est d'ailleurs pas remplie !
Pouvez-vous m'aider ?
D'avance, je vous en remercie.
En pièces jointes les 4 tables sql utilisées.
Voici le code HTML (partie supérieure entre head et /head :
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
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
|
<script type="text/javascript">
<!--
// categorie00
function gocategorie00() {
getXhr();
// On définit ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function() {
// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
if (xhr.readyState == 4 && xhr.status == 200) {
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options à la liste
document.getElementById('categorie01').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","php/ajaxcategorie01.php",true);
// Ne ps oublier ç pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Ne ps oublier de poster les arguments
// ici l'id de cat00
sel = document.getElementById('categorie00');
idcategorie00 = sel.options[sel.selectedIndex].value;
xhr.send("idCategorie00="+idcategorie00);
}
// categorie01
function gocategorie01() {
getXhr();
// On définit ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function() {
// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
if (xhr.readyState == 4 && xhr.status == 200) {
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options à la liste
document.getElementById('categorie02').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","php/ajaxcategorie02.php",true);
// Ne ps oublier ç pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Ne ps oublier de poster les arguments
// ici l'id de cat01
sel = document.getElementById('categorie01');
idcategorie01 = sel.options[sel.selectedIndex].value;
xhr.send("idCategorie01="+idcategorie01);
}
// categorie02
function gocategorie02() {
getXhr();
// On définit ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function() {
// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
if (xhr.readyState == 4 && xhr.status == 200) {
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options à la liste
document.getElementById('categorie03').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","php/ajaxcategorie03.php",true);
// Ne ps oublier ç pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Ne ps oublier de poster les arguments
// ici l'id de cat01
sel = document.getElementById('categorie02');
idcategorie02 = sel.options[sel.selectedIndex].value;
xhr.send("idCategorie02="+idcategorie02);
}
// categorie03
function gocategorie03() {
getXhr();
// On définit ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function() {
// On ne fait quelquechose que si l'on a tout reçu et que le serveur est OK
if (xhr.readyState == 4 && xhr.status == 200) {
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options à la liste
document.getElementById('categorie04').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","php/ajaxcategorie04.php",true);
// Ne ps oublier ç pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Ne ps oublier de poster les arguments
// ici l'id de cat01
sel = document.getElementById('categorie03');
idcategorie03 = sel.options[sel.selectedIndex].value;
xhr.send("idCategorie03="+idcategorie03);
}
-->
</script>
</head> |
Voici une partie du code HTML entre les balises body et /body :
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
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
|
<table id="tableoptions" border="0" cellspacing="0" style="vertical-align:middle;">
<tr>
<td width="150"></td>
<td width="310"></td>
</tr>
<tr>
<td colspan="2" style="padding:7px;" bgcolor="#0E72B5" class="blanc bold">Prix en ligne instantané</td>
</tr>
<tr>
<td colspan="2" style="padding:7px;">
Afin d'établir un devis,<br>veuillez choisir parmi toutes les options suivantes :</td>
</tr>
<tr id="tr00">
<td style="padding:7px;">Document</td>
<td style="padding-left:5px;">
<select id="categorie00" style="width:280px;" onChange="gocategorie00();">
<option value="none">Choisissez, svp !</option>
<?php
require_once("php/connexionMysql.inc.php");
$query = mysql_query("SELECT * FROM shop_categorie00 ORDER BY libelle");
while ($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value='".$back['id']."' >".$back['libelle']."</option>\n";
}
?>
</select>
<span id="loader00" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
</td>
</tr>
<tr id="tr01">
<td style="padding:7px;">Descriptif</td>
<td style="padding-left:5px;">
<select name="categorie01" style="width:280px;">
<option value="none">Choisissez, svp !</option>
<span id="loader01" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
</select>
</td>
</tr>
<tr id="tr02">
<td style="padding:7px;">Format</td>
<td style="padding-left:5px;">
<select name="categorie02" style="width:280px;">
<option value="none">Choisissez, svp !</option>
<span id="loader02" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
</select>
</td>
</tr>
<tr id="tr03">
<td style="padding:7px;">Papier</td>
<td style="padding-left:5px;">
<select name="categorie03" style="width:280px;">
<option value="none">Choisissez, svp !</option>
<span id="loader03" style="display: none;"><img src="images/boutique/loader.gif" alt="loading" width="16" height="16" /></span>
</select>
</td>
</tr>
<tr id="tr08">
<td style="padding:7px;">Prix d'impression</td>
<td style="padding-left:5px;"><span class="c14 bold"><?php echo $pvht."€ HT"; ?></span><span class="c10"><?php echo "( ".$pvht."€ TTC)"; ?></span></td>
</tr>
<tr id="tr09">
<td style="padding:7px;"> </td>
<td style="padding-left:5px;"><a href="panier.php">Ajouter au panier</a></td>
</tr>
</table> |
Voici php/ajaxcategorie01.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
require_once("php/connexionMysql.inc.php");
echo "<select name='categorie01' id='categorie01' onchange='gocategorie01()'>";
if (isset($_REQUEST['idCategoorie00'])) {
$query = mysql_query("SELECT * FROM shop_categorie01".
" WHERE parent=".$_REQUEST['idCategorie00'].
" ORDER BY id");
while ($back = mysql_fetch_assoc($query)) {
echo "<option value='".$back['id']."'>".$back['libelle']."</option>";
}
} else {
}
echo "</select>";
?> |
Voici php/ajaxcategorie02.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
require_once("php/connexionMysql.inc.php");
echo "<select name='categorie02' id='categorie02' onchange='gocategorie02()'>";
if (isset($_REQUEST['idCategoorie01'])) {
$query = mysql_query("SELECT * FROM shop_categorie02".
" WHERE parent=".$_REQUEST['idCategorie01'].
" ORDER BY id");
while ($back = mysql_fetch_assoc($query)) {
echo "<option value='".$back['id']."'>".$back['libelle']."</option>";
}
} else {
}
echo "</select>";
?> |
Voici php/ajaxcategorie03.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<?php
require_once("php/connexionMysql.inc.php");
echo "<select name='categorie03' id='categorie03' onchange='gocategorie03()'>";
if (isset($_REQUEST['idCategoorie02'])) {
$query = mysql_query("SELECT * FROM shop_categorie03".
" WHERE parent=".$_REQUEST['idCategorie02'].
" ORDER BY id");
while ($back = mysql_fetch_assoc($query)) {
echo "<option value='".$back['id']."'>".$back['libelle']."</option>";
}
} else {
}
echo "</select>";
?> |
