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('[email protected]', '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 )