Bonjour,
Voila sur une page html j'ai deux listes déroulantes et un tableau.
J'ai mis en place un script js qui fait que le choix dans la première liste déroulante affecte le contenu de la seconde (elle se remplit selon ce qu'on choisit dans la première)
Pour cela je me suis aidé du cours suivant : cours (partie IV - A)
Je voudrai maintenant faire en sorte que mon tableau se remplisse selon ce que je choisis dans la deuxième liste déroulante.
En gros je voudrais un truc du genre :
sélection dans liste 1 donne contenu de liste 2
sélection dans liste 2 donne tableau
J'ai essayé de reprendre le script js en le modifiant un peu mais je n'arrive pas à déclencher l'évennement.
Voici ce que j'ai fait :
Tout d'abord la page sur laquelle tout cela doit s'effectuer :
Ensuite le script js pour lier les listes déroulantes :
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 <?php //on définit le chemin de référence define("DCROOT", $_SERVER["DOCUMENT_ROOT"]."/portailTest"); //in insère le scripts contenant les fonctions de remplacement include (DCROOT."/scripts/replace.php"); ?> <!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" xml:lang="fr" > <head> <title>Thales Portal</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script type='text/javascript' src="scripts/listesLiees.js" ></script> <script type='text/javascript' src="scripts/tableauAppli.js" ></script> </head> <body> <h3>Liste des applications disponibles</h3> <div style="float:right;" > <p>Vous ne savez pas quelle est l'arborescence de l'application souhaitée ?<br /> <input type="button" value="Rechercher une application" onclick="document.location.href='recherche.php'" /></p> </div> <div> <p>Choisissez un type d'application ainsi qu'un projet pour accéder à la liste des applications concernées.</p> <?php //on se connecte à la base de données include (DCROOT."/scripts/connexion.php"); ?> <!--liste déroulante des types d'application--> <select name="typeAppli" id="typeAppli" onchange="listesLiees();" > <option>-- Choisissez un type d'application --</option> <?php //on crée la requête qui va récupérer tous les types d'application $requeteSQL = 'SELECT TypeAppName FROM TypeAppli'; //on exécute la requête SQL include (DCROOT."/scripts/requete.php"); //si la requete ne s'est pas exécutée on envoie un mail à l'administrateur et on affiche un message pour l'utilisateur if (!$exec_req) { $exec_err = oci_error($stmt); $ERR_TXT = "Erreur Oracle ".$exec_err['code']." - ".$exec_err['message']; mail('Anthony.PAMART@thaesgroup.com', 'Erreur lors d\'une requête SQL ...', $ERR_TXT); } //sinon on ajoute une option pour chaque entrée else { while ($typeAppli = oci_fetch_assoc($stmt)) { while (list($typeAppName, $typeAppNameVal) = each($typeAppli)) //while (list($champ, $valeur) = each($enregistrement en cours)) { echo '<option value="'.replace($typeAppNameVal).'">'.$typeAppNameVal.'</option>'; } } } ?> </select> <!--liste déroulante des projets associés--> <div style="display:inline;" id="projet" > <select name="projet" > <option>-- Choisissez un type d'application --</option> </select> </div> <div id="proj" > <table border="1" > <thead> <tr> <th>Name</th> <th>State</th> <th> </th> <th>Description</th> <th>Bespokes version</th> <th>Data<br />date</th> <th>Forecast</th> </tr> </thead> <tbody> <tr> <td colspan="7" style="text-align:center;" >Nothing</td> </tr> </tbody> </table> </div> <?php //on se déconnecte de la base de données include (DCROOT."/scripts/deconnexion.php"); ?> </div> </body> </html>
Puis le script php qui affiche la nouvelle liste déroulante :
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 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 supporte le navigateur alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); xhr = false; } return xhr; } /** * Methode qui sera appelée lorsqu'une option est sélectionnée dans la liste des types d'application */ function listesLiees(){ var xhr = getXhr(); // On defini ce qu'on va faire quand on aura la reponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout recu 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('projet').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","listeProjets.php",true); // ne pas oublier ca pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, le type d'application choisi sel = document.getElementById('typeAppli'); typeApplication = sel.options[sel.selectedIndex].value; xhr.send("typeAppli="+typeApplication); }
ensuite le script js pour lier le tableau et la 2e 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
28
29
30
31
32
33
34
35
36
37
38
39 ?php //on définit le chemin de référence define("DCROOT", $_SERVER["DOCUMENT_ROOT"]."/portailTest"); //on insere la fonction de doublage des quotes pour pouvoir effectuer des requetes oracles include (DCROOT."/scripts/replace.php"); //on ouvre la liste déroulante echo '<select name="projet" id="proj" onchange="tableauAppli();" >'; echo '<option>-- Choisissez un projet --</option>'; //si on a bien le paramètre et qu'il n'est pas vide on le récupère if(isset($_POST['typeAppli']) && $_POST['typeAppli'] != null) { $typeAppli = htmlentities($_POST['typeAppli']); $typeAppli = unreplace($typeAppli); //on se connecte à la base de données include (DCROOT."/scripts/connexion.php"); //on crée la requête SQL qui va récupérer la liste des projets en fonction du type d'application choisi $requeteSQL = 'SELECT ProjName FROM Projet WHERE TypeAppName=\''.escapeRequest($typeAppli).'\' ORDER BY position'; //on exécute la requête include (DCROOT."/scripts/requete.php"); //on ajoute une option par projet while($projet = oci_fetch_assoc($stmt)) { while (list($projName, $projNameVal) = each($projet)) { echo '<option value="'.replace($projNameVal).'">'.$projNameVal.'</option>'; } } include (DCROOT."/scripts/deconnexion.php"); } echo '</select>'; ?>
A noter que je n'ai aps recréé de fonction getXhr() car j'utilise celle de l'autre script (j'avais essayé en en recréant une nomée getXhr2() mais comme ce sont les mêmes j'ai trouvé ca inutile)
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 /** * Méthode qui sera appelée lorsqu'un projet sera sélectionné dans la liste déroulante du front office */ function tableauAppli(){ var xhr = getXhr(); // On defini ce qu'on va faire quand on aura la reponse xhr.onreadystatechange = function(){ // On ne fait quelque chose que si on a tout recu 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('appli').innerHTML = leselect; } } // Ici on va voir comment faire du post xhr.open("POST","tableauAppli.php",true); // ne pas oublier ca pour le post xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); // ne pas oublier de poster les arguments // ici, le projet sélectionné sel = document.getElementById('proj'); projet = sel.options[sel.selectedIndex].value; xhr.send("proj="+projet); }
Enfin le script php qui doit afficher le nouveau tableau :
J'ai, enfin, une erreur js qui dit ceci :
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 <?php //on définit le chemin de référence define("DCROOT", $_SERVER["DOCUMENT_ROOT"]."/portailTest"); //on insere la fonction de doublage des quotes pour pouvoir effectuer des requetes oracles include (DCROOT."/scripts/replace.php"); //on ouvre le tableau et on affiche l'en-tête ?> <table border="1" > <thead> <tr> <th>Name</th> <th>State</th> <th> </th> <th>Description</th> <th>Bespokes version</th> <th>Data<br />date</th> <th>Forecast</th> </tr> </thead> <tbody> <?php //si on a bien le paramètre passé en paramètre on le récupère et on affiche le contenu du tableau en fonction de celui ci if (isset($_POST['proj']) && $_GET['proj'] != null) { $proj = htmlentities($_POST['proj']); $proj = unreplace($proj); //on se connecte à la base de données include (DCROOT."/scripts/connexion.php"); //on crée la requête SQL qui va récupérer toutes les applications liées au projet sélectionné $requeteSQL = 'SELECT AppName, AppDesc, AppSourceDate, AppForecast, AppMaint FROM Application WHERE ProjName=\''.$proj.'\' ORDER BY position'; //on exécute la requête include (DCROOT."/scripts/requete.php"); //si la requête n'a rien retournée on affiche une case unique en indiquant qu'il n'y a pas d'applications sur ce projet if (!$exec_req) { echo '<tr><td colspan="2" style="text-align:center;" >No applications found for this project ...</td></tr>'; } //sinon on affiche la liste des applications else { while ($appli = oci_fetch_assoc($stmt)) { echo '<tr>'; foreach ($appli as $champ => $val) { echo '<td>'; echo $val; echo '</td>'; } echo '</tr>'; } } } //on ferme le tableau ?> </tbody> </table> <?php //on se déconnecte de la base de données include (DCROOT."/scripts/deconnexion.php"); ?>
L'erreur est donc sur le xhr.send.ligne : 25
car : 2
erreur : cet objet ne gère pas cette propriété ou cette méthode
code : 0
url : l'url de la page
Donc voila je ne vois pas pourquoi ça ne marche pas puisqu'avec les listes déroulantes ça le fait à merveille, ça devrait être pareil entre 2 listes qu'entre une liste et un tableau non ?
Merci d'avance pour votre aide car je galère un peu (en plus je n'y connais rien en javascript)
Partager