[AJAX] Listes liées et affichage tableau

**Celmar** · 18/11/2011, 19h56

Bonjour

Je voudrais réaliser un formulaire avec 2 listes liées... ou plutôt une liste (propriétés) qui "appelle" une 2ème liste (valeurs) sous forme de tableau (et non de liste déroulante).
Je me suis servi des tutos suivants :
http://siddh.developpez.com/articles/ajax/
http://j-reaux.developpez.com/tutori...-tableau-html/

Mes requêtes sql sont les suivantes :

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
CREATE TABLE `prop` (
  `id` tinyint(4) NOT NULL auto_increment,
  `nom` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
);
 
insert into `prop` values 
(1,'p1'),
(2,'p2'),
(3,'p3');
 
CREATE TABLE `val` (
  `id` tinyint(4) NOT NULL auto_increment,
  `nom_val` varchar(50) NOT NULL,
  `idProp` tinyint(4) default NULL,
  PRIMARY KEY  (`id`)
) ;
 
insert into `val` values 
(1,'v1',1),
(2,'v1',2),
(3,'v1',3),
(4,'v2',1),
(5,'v2',2),
(6,'v3',1),
(7,'v4',2),
(8,'v4',3),
(9,'v5',3);

Mon fichier propriete.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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
  	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  	<meta name="language" content="fr">
		<script type='text/javascript'>
 
			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 supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu 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 à la liste
						document.getElementById('val').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","tableau.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de la propriété
				sel = document.getElementById('prop');
				idprop = sel.options[sel.selectedIndex].value;
				xhr.send("idProp="+idprop);
			}
		</script>
	</head>
	<body>
		<form>
				<legend>Listes liées</legend>
				<label>Propriétés</label>
				<select name='prop' id='prop' onchange='go()'>
					<option value='-1'>Aucune</option>
					<?
						mysql_connect("serveur","admin","mdp");
						mysql_select_db("base");
						$res = mysql_query("SELECT * FROM prop ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
<br /><input type="submit" name="ok" id="ok" value="Envoyer" />
		</form>
<table id="val" style="position: absolute; top: 80px; left: 250px">
    <tbody>
    </tbody>
</table>
 
	</body>
</html>

Mon fichier tableau.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
<?php
echo    '<table id="val">
        <tbody>';
        if(isset($_POST["idProp"])){
                $connexion = mysql_connect("serveur","admin","mdp");
                mysql_select_db("base");
                $res = mysql_query("SELECT id,nom_val FROM val 
                        WHERE idProp=".$_POST["idProp"]." ORDER BY nom_val");
 
// AFFICHAGE TABLEAU
 
 
$NbrCol = 1;
$result = mysql_query($res);
// --------------------------------
// nombre de cellules à remplir
$NbreData = mysql_num_rows($result);
// --------------------------------
// affichage
$NbrLigne = 0;
if ($NbreData != 0) {
        $j = 1;
 
        while ($val = mysql_fetch_array($result)) 
        {
                if ($j%$NbrCol == 1) {
                        $NbrLigne++;
                        $fintr = 0;
?>		<tr>
<?php           }
?>
			<td>
<?php                   // -------------------------
                        // DONNEES A AFFICHER dans la cellule
                        echo $val['nom_val'];
                        // -------------------------
?>			</td>
<?php           if ($j%$NbrCol == 0) {
                        $fintr = 1;
?>		</tr>
<?php           }
                $j++;
        } // fin while affichage tableau
        // fermeture dernière balise /tr
        if ($fintr!=1) {
?>		</tr>
<?php   } 
 
 
                }  
 
    mysql_close($connexion);
        }  
 
echo    "</tbody>
         </table>";
?>