[AJAX] 4 listes liées le retour
Bonjour a tous.
j'ai besoin de faire quatre listes liées pour mon site mais voila je bloque sur le xhr.send
J'ai suivi un tuto sur un site mais ce tuto explique comment faire pour faire deux listes.
J'ai modifié ce tuto pour l'adapter à mon besoin, j'ai commencé par faire trois listes et ça fonctionne presque.
Le souci c'est lors de la sélection de la deuxième liste le résultat qui devrait s'afficher dans le troisième select s'affiche dans le deuxième.
Je pense que cela fin du xhr.send que je déclare dans ma fonction request.
Je met mon script si vous pouvez me donner un coup de main ce serai sympas.
page cartouches_generiques.php le JS DANS le 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
|
<script type="text/javascript" src="<?php echo ROOTPATH; ?>/js/oXHR.js"></script>
<script type="text/javascript">
<!--
function request(oSelect) {
var valuetype = oSelect.options[oSelect.selectedIndex].value;
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};
xhr.open("POST","<?php echo ROOTPATH; ?>/insert/ajax_type_generique.php",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdEditor=" + valuetype);
}
function requestmarque(oSelectmarque) {
var valuemarque = oSelectmarque.options[oSelectmarque.selectedIndex].value;
var xhr = getXMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
readData(xhr.responseXML);
document.getElementById("loader").style.display = "none";
} else if (xhr.readyState < 4) {
document.getElementById("loader").style.display = "inline";
}
};
xhr.open("POST","<?php echo ROOTPATH; ?>/insert/ajax_marque_generique.php",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("IdMarque="+valuemarque);
}
function readData(oData) {
var nodes = oData.getElementsByTagName("item");
var oSelect = document.getElementById("softwaresSelect");
var oSelectmarque = document.getElementById("gammeSelect");
var oOption, oInner;
var oOptionmarque, oInnermarque;
oSelect.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOption = document.createElement("option");
oInner = document.createTextNode(nodes[i].getAttribute("name"));
oOption.value = nodes[i].getAttribute("id");
oOption.appendChild(oInner);
oSelect.appendChild(oOption);
}
oSelectmarque.innerHTML = "";
for (var i=0, c=nodes.length; i<c; i++) {
oOptionmarque = document.createElement("option");
oInnermarque = document.createTextNode(nodes[i].getAttribute("name"));
oOptionmarque.value = nodes[i].getAttribute("id");
oOptionmarque.appendChild(oInnermarque);
oSelect.appendChild(oOptionmarque);
}
}
//-->
</script> |
DANS le BODY
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<fieldset>
<legend>Recherchez votre produit générique par sélection</legend>
<select id="editorsSelect" onchange="request(this);">
<option value="none">Sélectionnez le type : </option>
<?php
connexionbdd();
$query = mysql_query("SELECT DISTINCT TYPE FROM cartouche_generique ORDER BY TYPE");
while ($back = mysql_fetch_assoc($query)) {
echo "\t\t\t\t<option value=\"" . $back["TYPE"] . "\">" . $back["TYPE"] . "</option>\n";
}
?>
</select>
<span id="loader" style="display: none;"><img src="images/loader.gif" alt="loading" /></span>
<select id="softwaresSelect" onchange="requestmarque(this);">
<option value="none">Sélectionnez la marque : </option>
</select>
<select id="gammeSelect" onchange="requestgamme(this);">
<option value="none">Sélectionnez la gamme</option>
</select>
</fieldset> |
la page ajax_type_generique.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<list>";
$idEditor = (isset($_POST["IdEditor"])) ? htmlspecialchars($_POST["IdEditor"]) : NULL;
if ($idEditor) {
mysql_connect("***","***","***");
mysql_select_db("***");
$query = mysql_query("SELECT DISTINCT marque FROM cartouche_generique WHERE TYPE='".$idEditor."' ORDER BY marque");
while ($back = mysql_fetch_assoc($query)) {
echo "<item id=\"".$back["marque"] . "\" name=\"" . $back["marque"] . "\" />";
}
}
echo "</list>";
?> |
la page ajax_marque_generique.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
echo "<list>";
$idMarque = (isset($_POST["IdMarque"])) ? htmlspecialchars($_POST["IdMarque"]) : NULL;
if ($idMarque) {
mysql_connect("***","***","***");
mysql_select_db("***");
$query = mysql_query("SELECT DISTINCT gamme FROM cartouche_generique WHERE marque='".$idMarque."' ORDER BY gamme");
while ($back = mysql_fetch_assoc($query)) {
echo "<item id=\"".$back["gamme"] . "\" name=\"" . $back["gamme"] . "\" />";
}
}
echo "</list>";
?> |
En espérant que quelqu'un me vienne en aide, je cherche depuis un bon moment.
