Lier deux listes avec AJAX
bonjour,
j'ai éssayer de suivre le tuto d'ajax concernant la liaison de deux listes dynamiques mais aucun élément de la deuxième listes n'est affiché :cry:
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
|
<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;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhr.onreadystatechange = function(){
// On ne fait quelque chose que si 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 a la liste
document.getElementById('fk_sous_type_incident').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxSousTypeIncident.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id du type incident
sel = document.getElementById('fk_type_incident');
FK_type_incident = sel.options[sel.selectedIndex].value;
xhr.send("fk_type_incident="+FK_type_incident);
}
</script>
le code html :
<tr>
<td width="25%"> Type d'incident :</td>
<?php $Result=mysql_query("select * from hd_type_incident")or die(mysql_error());
$nb = mysql_num_rows($Result);
$ListDir = '<option value="0">Type incident</option>';
while ($tmpObject = mysql_fetch_object($Result)) //tant qu'il y a des types d'incidents, on les affiche
{
$ListDir .= '<option value="'.$tmpObject->id_type_incident.'">'.$tmpObject->type_incident.'</option>';
}
?>
<td width="15%" >
<select name='fk_type_incident' id='fk_type_incident' onchange='go()'>
<?php echo $ListDir?>
</select> </td>
<td >
<div id='fk_sous_type_incident' style='display:inline'>
<select name='fk_sous_type_incident'>
<option value='0'>Choisir un type d'incident</option>
</select>
</div> </td>
</tr> |
le fichier ajaxSousTypeIncident.php :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<?php
echo "<select name='fk_sous_type_incident'>";
if(isset($fk_type_incident))
{
$result = db_connect();
if (!$result)
die(mysql_error());
// selection de la base de données
$select = mysql_select_db($dbName,$result);
if (!$select)
die(mysql_error());
$res = mysql_query("SELECT * FROM hd_sous_type_incident
WHERE fk_type_incident=".$fk_type_incident." ORDER BY sous_type_incident");
while($row = mysql_fetch_object($res))
{
echo "<option value='".$row->id_sous_type_incident."'>".$row->sous_type_incident."</option>";
}
}
echo "</select>";
?> |
mes deux tables :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
CREATE TABLE `hd_type_incident` (
`id_type_incident` int(11) NOT NULL auto_increment PRIMARY KEY,
`type_incident` text NOT NULL,
`description` text NOT NULL,
`fk_user` int(11),
FOREIGN KEY(fk_user) REFERENCES hd_utilisateur(id_user) ON DELETE CASCADE ON UPDATE CASCADE,
INDEX(fk_user)
)TYPE=INNODB;";
CREATE TABLE `hd_sous_type_incident` (
`id_sous_type_incident` int(11) NOT NULL auto_increment PRIMARY KEY,
`sous_type_incident` text NOT NULL,
`description` text NOT NULL,
`fk_type_incident` int(11),
FOREIGN KEY(fk_type_incident) REFERENCES hd_type_incident(id_type_incident) ON DELETE CASCADE ON UPDATE CASCADE,
INDEX(fk_type_incident)
)TYPE=INNODB;"; |
merci d'avance à tous ceux qui prendront du temps pour lire mon message
