[AJAX] Liste liées Ajax

Invité · 13/07/2009, 10h30

Bonjour,

Je veux mettre en place une liste liée étant alimenté par une table d'une base de données MySQL.

Ma talbe en question est la table "stagiaires", elle comporte plusieurs champs. Les deux champs qui me sont nécessaire pour ma liste liée est Nom et Prénom.

Pour mettre en place cette liste liée, j'ai essayer de modifier le code source fournit dans le tuto dispo >ICI<

Voici mon code source :

auteur.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
78
79
80
81
82
83
84
85
86
87
88
89
<html>
	<head>
		<title>My webpage is rich</title>
		<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 change()
			{	
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					alert(xhr.readyState);
					// 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)
					{
						di = document.getElementById('Stagiaires');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxLivre.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 l'auteur
				NomStg = document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
				alert(NomStg);
				xhr.send("Nom="+NomStg);			
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Noms</label>
				<select name='nom' id='nom' onchange='change()'>
					<option value='-1'>Aucun</option>
					<?php
                                                mysql_connect("localhost","root","mysql");
                                                mysql_select_db("bdd");
                                                $res = mysql_query("SELECT Distinct Nom from Stagiaires ORDER BY Nom");
                                                while($row = mysql_fetch_assoc($res))
                                                {
                                                        echo "<option value='".$row["Nom"]."'>".$row["Nom"]."</option>";
                                                }
                                        ?>
				</select>
				<label>Prenoms</label>
				<div id='prenom' style='display:inline'>
				<select name='prenom'>
					<option value='-1'>Choisir un nom</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

ajaxLivre.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
<?php
 
        echo "<select name='prenom'>";
        if(isset($_POST["Nom"])){
                mysql_connect("localhost","root","mysql");
                mysql_select_db("bdd");
                $res = mysql_query("SELECT Distinct Prenom FROM Stagiaires WHERE Nom=".$_POST["Nom"]." ORDER BY Prenom");
                while($row = mysql_fetch_assoc($res))
                {
                        echo "<option value='".$row["Prenom"]."'>".$row["Prenom"]."</option>";
                }
        }
        echo "</select>";
?>

Le probleme que je rencontre c'est que dans ajaxLivre.php je n'arrive pas à récupérer le Nom. Pourtant dans auteur.php dans le code javscript a la fin de la fonction change() qui est appelé des que l'élément de la liste change, je récupère bien le bon Nom selectionner dans la liste (je vérifie cela grace à alert(NomStg) ).

Merci

[Edit] Ps: A noter que Prenom et Nom sont des varchar dans la table alors que dans l'exemple ce sont des int qui sont utiliser (id) je ne pense pas que sa change grand chose dans le code Html/php mais peut etre dans le js avec la ligne "document.getElementById('nom').options[document.getElementById('nom').selectedIndex].value;
"

[AJAX] Liste liées Ajax

AJAX

Mode arborescent

Discussions similaires

Partager

Partager