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
ajax_modele.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
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>
Un moment j'ai modifier ma fonction "go" dans test_ajax2.php pour voir ce que ce passe.
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 <?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>"; ?
voici le code de ma deuxième fonction "go" :
ceci me dit entre autre que mon "readyState" reste à 1 quelque soit mon choix dans ma première liste.
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 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); }
j'avais aussi mis dans ma page ajax_modele.php
ceci;
quand je lance ma page principale je n'est pas l'alerte "ici" donc il ne voie pas ma page ajax_modele.php
Code : Sélectionner tout - Visualiser dans une fenêtre à part echo'<script LANGUAGE="JavaScript">alert("ici");</SCRIPT>';
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
Partager