[AJAX] Listes liées dynamiques. 2eme liste pas à jour.

**jytest** · 15/11/2011, 22h07

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 :

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
 
<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 :

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
 
    <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;">&nbsp;</td>
        <td style="padding-left:5px;"><a href="panier.php">Ajouter au panier</a></td>
        </tr>
    </table>

Voici php/ajaxcategorie01.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
 
<?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 :

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
 
<?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 :

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
 
<?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>";
 
?>

**andry.aime** · 16/11/2011, 06h12

Bonjour,
C'est le conteneur du select que tu dois modifier mais pas le select. Chez certains navigateur, les select ne supportent pas innerHTML.

<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>

Code :

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

1
2
3
4
5
<td style="padding-left:5px;" id="td01">
        	<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>

document.getElementById('categorie01').innerHTML = leselect;

Code :

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

document.getElementById('td01').innerHTML = leselect;

A+.

**jytest** · 16/11/2011, 06h29

andry.aime, merci.
Génial.
C'est tout à fait cela !!!
Encore merci !

[AJAX] Listes liées dynamiques. 2eme liste pas à jour.

AJAX

Discussions similaires

Partager

Partager