tableau dynamique en javascript

Version imprimable

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:

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:

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:

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:

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:

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 :

Citation:

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 :( )

22/07/2008, 15h42
Matthieu2000

Citation:

<div id="proj" >
<select name="projet" id="proj" onchange="tableauAppli();" >

vérifie l'unicité de l'id
22/07/2008, 15h52
SpaceFrog

j'ai pas vu l'id sur la page ...

En effet il y avait deux id identiques je n'avais pas mi le bon id sur le 2e div (celui du tableau) et lui avais mi le même que la deuxième liste déroulante. J'ai donc changé la valeur pour lui donner comme valeur "appli" et ainsi être en accord avec le script d'ailleur.

Mais je me posais une question :

pour lier les listes déroulantes on fait :
- dans la page:

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
 
<!--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>

- le script js (sans la fonction get pour alléger):

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
 
/**
* 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);
}

- et la liste dynamique qui est apart :

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
 
<?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>';
?>

Ce que je souhaite mettre en évidence, c'est comment ça se passe :
si j'ai bien compris, au niveau du script js, lorsque la page est finie de charger (xhr.onreadystatechange = function(){ .... } => premier groupe de commandes) il récupère l'id du div à modifier. mais est-ce que le code

Code:

1
2
3
leselect = xhr.responseText;
			// On se sert de innerHTML pour rajouter les options a la liste
			document.getElementById('projet').innerHTML = leselect;

ne servirait-il pas à dire qu'il s'agit d'une liste déroulante qu'il faut modifier ? (ce qui expliquerait que cela lie bien 2 listes et pas 1liste+1tableau)

Si j'ai bien raison ce serait donc à cause de ces deux lignes que le script n'agit pas et donc si quelqu'un sait comment faire le l'en remercie d'avance s'il m'aide.

Sinon si j'ai tord je ne vois pas du tout...

Je continue à chercher mais n'y connaissant rien en javascript je ne sais pas trop ou chercher et c'est la raison d'ailleur pour laquelle je sollicite votre aide ^^

22/07/2008, 16h14
Matthieu2000

utilise firebug sur ff pour voir les modification faite par ton code!

Citation:

//Récupère les données de la requette ajax sous forme texte
xhr.responseText;
// récupère l'ojet dont l'id est 'projet'
document.getElementById('projet').
//contenu à l'intérieur de la tag
innerHTML
22/07/2008, 16h19
Sh4dow49

si par ff tu veux parler de firefox je n'utilise que Internet Explorer pour tester car c'est ce qu'utilisent 95 % des utilisateurs de la boite.

Et si jamais j'ai mal compris, de quoi veux tu parler ?