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 :
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>&nbsp;</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>
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
 
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);
}
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
 
?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>';
?>
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
 
/**
* 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);
}
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)

Enfin le script php qui doit afficher le nouveau tableau :
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>&nbsp;</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");
?>
J'ai, enfin, une erreur js qui dit ceci :
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
L'erreur est donc sur le xhr.send.

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 )