[AJAX] Liste lier - Ajax - XMLHttpRequest
Bonjour,
J’ai un projet d'application à faire, pour cela j'ai besoin de lier plusieurs liste déroulante.
Étant débutante en développement web je préfère essayer en liant deux liste (comme sur le tuto fait par Siddh, que j'ai utilisé pour faire mon test.)
Mes deux listes sont alimenter par 2 table MySQL
- cmarque_imprimantes
- cimprimantes
Pour alimenter la première liste qui donne les marques d'imprimantes.
Une fois le choix de la marque la deuxième liste fait apparaitre le modèle existant dans l'entreprise correspondant à la marque choisie.
Voici mon code:
test_ajax2.php
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test AJAX Liste Liers</title>
<script type="text/javascript">
<!--
function getXhr()
{
var xhr = null;
if (window.XMLHttpRequest)
xhr = new XMLHttpRequest ();
else if (window.ActiveXObjet)
{
try
{
xhr = new ActiveXObjet ("Msxml2.XMLHTTP");
}
catch (e)
{
xhr = new ActiveXObjet ("Microsoft.XMLHTTP");
}
}
else
{
alert("Votre Navigateur ne supporte pas les objets XMLHTTPRequest ... ");
xhr = false;
}
return xhr;
}
function go()
{
var xhr = getXhr();
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
leselct = xhr.responseText;
document.getElementById ('modele').innerHTML = leselect;
}
}
xhr.open("POST","ajax_modele.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('marque');
idmarque = sel.options[sel.selectedIndex].value;
xhr.send("idMarque="+idmarque);
}
//-->
</script>
</head>
<body>
<form>
<fieldset>
<legend> Ajout de consommables au stock : </legend>
<label>Marque</label></br>
<select name='marque' id='marque' onchange='go()'>
<option value='-1'>Aucun</option>
<?php
try
{
//connection à la base de donnée MySQL
$bdd = new PDO('mysql:host=localhost;dbname=gestion_des_consommables', 'root', '');
}
catch(Exception $e)
{
//si erreur alors message + arret
die('Erreur : '.$e->getMessage());
}
//si tout et O.K alors sa continue
//recuperation du contenue de la table
$ReponsesRequete_1 = $bdd->query('SELECT * FROM cmarque_imprimantes ORDER BY Nom');
while ($Enregistrement_1 = $ReponsesRequete_1->fetch())
{
$Marque = $Enregistrement_1['Nom'];
$ID_Marque = $Enregistrement_1['ID'];
/*echo '<option value=>'.$Marque . '</option>\n';*/
echo "<option value='".$ID_Marque."'>".$Marque."</option>";
}
?>
</select>
</br></br>
<label>Modele</label>
<div id='div_modele'>
<select name='modele' id='modele'>
<option value='-1'>Choisir Marque</option>
</select>
</div>
</fieldset>
</form>
</body>
</html> |
ajax_modele.php
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
| <?php
echo "<select name='modele' id='modele'>"
if(isset($_POST["idMarque"]))
{
try
{
//connection à la base de donnée MySQL
$bdd = new PDO('mysql:host=localhost;dbname=gestion_des_consommables', 'root', '');
}
catch(Exception $e)
{
//si erreur alors message + arret
die('Erreur : '.$e->getMessage());
}
//si tout et O.K alors sa continue
//recuperation du contenue de la table
$ReponsesRequete_2 = $bdd->query('SELECT DISTINCT * FROM cimprimantes WHERE idMarque=' .$_POST['idMarque'] . 'ORDER BY Modele');
while ($Enregistrement_2 = $ReponsesRequete_2->fetch())
{
$Modele = $Enregistrement_2['Modele'];
$ID_Modele = $Enregistrement_2['ID'];
/*echo '<option>'.$Modele . '</option>\n';*/
echo "<option value='".$ID_Modele."'>".$Modele."</option>";
}
}
echo "</select>";
? |
Un moment j'ai modifier ma fonction "go" dans test_ajax2.php pour voir ce que ce passe.
voici le code de ma deuxième fonction "go" :
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
| function go()
{
var xhr = getXhr();
xhr.onreadystatechange = function()
{
alert ("1");
alert ("ready state:"+ xhr.readyState);
alert ("status:"+ xhr.status);
if (xhr.readyState == 4 && xhr.status == 200)
{
alert ("2");
leselct = xhr.responseText;
document.getElementById ('modele').innerHTML = leselect;
alert (leselect);
}
}
xhr.open("POST","ajax_modele.php",true);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
sel = document.getElementById('marque');
idmarque = sel.option[sel.selectedIndex].value;
alert (idmarque);
xhr.send("idMarque="+idmarque);
} |
ceci me dit entre autre que mon "readyState" reste à 1 quelque soit mon choix dans ma première liste.
j'avais aussi mis dans ma page ajax_modele.php
ceci;
Code:
echo'<script LANGUAGE="JavaScript">alert("ici");</SCRIPT>';
quand je lance ma page principale je n'est pas l'alerte "ici" donc il ne voie pas ma page ajax_modele.php
J'ai beaucoup chercher je n'arrive pas à trouver le problème, le pire c'est que e suis sur que c'est surement une erreur bête u_u..
Par la suite j'aurais 4 liste à lier alimenter par plusieurs table SQL dans ma base de donnée (en espèrent que ce soie possible sinon je ne sais pas comment coder mon application que j'ai pour projet.)
Je vous remercie pour votre patience et votre aide.
Cordialement
