[AJAX] Listes liées avec Ajax
Bonjour à tous,
J'ai trois listes déroulantes :
Comptes | Mules | Type
Comptes m'affiche les mules ==> fonction gomules) Ok
Mule devrait m'afficher les types ==> fonction gotype()
J'ai limpression que la fonction gotype n'est pas appelée.
Pourriez vous me dire si j'ai des erreurs car cela fait une semaine que je cherche et que je ne trouve pas. Merci davance de votre aide
Ci dessous mes sources :
Le fichier mesfonc.js
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
|
// Creation de l'objet XMLHttpRequest
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;
}
/* Gestion de la liste déroulante des mules */
function gomule()
{
alert("gomule");
var xhrmule = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
xhrmule.onreadystatechange = function()
{
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhrmule.readyState == 4 && xhrmule.status == 200)
{
leselect = xhrmule.responseText;
// Ajoute les options a la liste via lid du div
document.getElementById('div_mule').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhrmule.open("POST","ajaxmules.php",true);
// ne pas oublier ça pour le post
xhrmule.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Poste les arguments ici le compte via l'id du select
var selcpte = document.getElementById('lst_cpte');
var cptesel = selcpte.options[selcpte.selectedIndex].value;
var data = "dcpte="+cptesel;
xhrmule.send(data);
}
/* Gestion de la liste déroulante des types */
function gotype()
{
alert("gotype");
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)
{
leselecttype = xhr.responseText;
// Ajouter les options a la liste via l'id du div
document.getElementById('div_type').innerHTML = leselecttype;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxtypes.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// Poste les arguments le compte puis la mule via l'id du select
var selcpte = document.getElementById('lst_cpte');
var cptesel = selcpte.options[selcpte.selectedIndex].value;
var selmule = document.getElementById('lst_mule');
var mulesel = selmule.options[selmule.selectedIndex].value;
var datatype = "dcpte="+cptesel+"&dmule="+mulesel;
xhr.send(datatype);
alert(datatype);
} |
Mon formulaire principal
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
|
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="mesfonc.js" type="text/javascript"></script>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
</head>
<body>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Compte</label>
<select name="lst_cpte" id="lst_cpte" onchange="gomule()">
<option value="-1">Aucun</option>
<?php
$res = mysql_query("SELECT DISTINCT compte FROM t_inventaire_cpte");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row['compte']."'>".$row['compte']."</option>";
}
?>
</select>
<label>Mules</label>
<div id="div_mule" style="display:inline">
<select name="lst_mule" id="lst_mule" onchange="gotype()">
<option value="-1">Choisir une mule</option>
</select>
</div>
<label>Type</label>
<div id="div_type" style="display:inline">
<select name="lst_type" id="lst_type">
<option value="-1">Choisir un type</option>
</select>
</div>
</fieldset>
</form>
</body>
</html> |
le fichier ajaxtypes.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
echo "<select name='lst_type'>";
if(isset($_POST["dcpte"]) || (isset($_POST["dmule"]))
{
$res = mysql_query("SELECT DISTINCT type FROM t_inventaire_cpte"
// . " WHERE compte = 'BKL3_3' AND mule= 'Mule 4' ORDER BY type";
. " WHERE compte = '".$_POST['dcpte']."' AND mule= '".$_POST['dmule']."' ORDER BY type";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["type"]."'>".$row["type"]."</option>";
}
}
echo "</select>";
?> |
le fichier ajaxmules.php
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?php require_once('Connections/bqe_scl_hype.php'); ?>
<?php mysql_select_db($database_bqe_scl_hype, $bqe_scl_hype); ?>
<?php
echo "<select name='lst_mule'>";
if(isset($_POST["dcpte"]))
{
$res = mysql_query("SELECT DISTINCT mule FROM t_inventaire_cpte"
. " WHERE compte = '".$_POST["dcpte"]."' ORDER BY mule");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["mule"]."'>".$row["mule"]."</option>";
}
}
echo "</select>";
?> |
