[AJAX] Charger une liste dynamique AJAX PHP

**renardchan** · 28/01/2011, 15h37

Bonjour,

J'essaie tant bien que mal de mettre en oeuvre le tutoriel de siddh. Mais je ne parviens pas à retourner la valeur dans ma liste. Je ne comprends pas d'où cela peut-il venir. J'ai appliqué mon code à ma postgresql.

Voila pour le 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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</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 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 a la liste
						document.getElementById('livre').innerHTML = leselect;
					}
				}

				// 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
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;  <==ici idauteur est juste je l'ai vérifié avec une alert
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
					
						$dblink = pg_connect("host=localhost port=5432 dbname=postgres user=xxxxpassword=xxxx");
						//on lance la requete
						$query = "SELECT * FROM auteur ORDER BY nom";
						$res = pg_query($dblink,$query)  or die ('erreurrequete');
						
						
						while($row = pg_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Et voila mon code php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php
        echo "<select name='livre'>";
        if(isset($_POST["idAuteur"])){
                $dblink = pg_connect("host=localhost port=5432 dbname=postgres user=postgres password=xxxx");
                $res = pg_query("SELECT idlivre,titre FROM livre   
                        WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
                while($row = pg_fetch_assoc($res)){
                        echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";
                }
        }
        echo "</select>";
?>

J'ai également vérifié la requête en modifiant le $_POST par "1" et la requête fonctionne.

Comment puis-je vérifier la valeur de $_POST à l'arrivé dans mon livreajax.php?

Il est à noter que, pour les besoins de l'exemple, j'ai renseigné mon id non pas par auto-incrémentation mais simplement par un type caractère, est ce un problème?

Par avance merci,

**andry.aime** · 28/01/2011, 19h40

Bonsoir,

IE pose souvent des problèmes avec les différents éléments ayant le même name et id.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<div id='divLivre' style='display:inline'>
				<select name='livre'>

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
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){
						var leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('divLivre').innerHTML = leselect;
					}
				}
 
				// 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
				var sel = document.getElementById('auteur');
				var idauteur = sel.options[sel.selectedIndex].value;  
				xhr.send("idAuteur="+idauteur);
			}

$res = pg_query("SELECT idlivre,titre FROM livre
WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
while($row = pg_fetch_assoc($res)){
echo "<option value='".$row["id"]."'>".$row["titre"]."</option>";

Montre nous le code html généré du formulaire mais pas le php.

A+.

**renardchan** · 29/01/2011, 14h33

J'ai bien appliqué les changements que tu m'as suggéré. Toutefois je faissais mes testes avec firefox.J'ai ainsi toujours le même problème, à savoir, après la sélection, la seconde liste retourné est vide.

Voici le 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
 
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</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 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 a la liste
						document.getElementById('divlivre').innerHTML = leselect;
					}
				}
 
				// 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
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?
 
 
 
						$dblink = pg_connect("host=localhost port=5432 dbname=postgres user=xxx password=xxxx");
						//on lance la requete
						$query = "SELECT * FROM auteur ORDER BY nom";
						$res = pg_query($dblink,$query)  or die ('erreurrequete');
 
 
						while($row = pg_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
				</select>
				<label>Livres</label>
				<div id='divlivre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

Le ajaxlivre.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<?php
        echo "<select name='livre'>";
        if(isset($_POST["idAuteur"])){
                $dblink = pg_connect("host=localhost port=5432 dbname=postgres user=xxx password=xxxx");
                $res = pg_query("SELECT idlivre,titre FROM livre 
                        WHERE idAuteur=".$_POST["idAuteur"]." ORDER BY titre");
                while($row = pg_fetch_assoc($res)){
                        echo "<option value='".$row["idlivre"]."'>".$row["titre"]."</option>";
                }
        }
        echo "</select>";
?>

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
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</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 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 a la liste
						document.getElementById('divlivre').innerHTML = leselect;
					}
				}
 
				// 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
				sel = document.getElementById('auteur');
				idauteur = sel.options[sel.selectedIndex].value;
				xhr.send("idAuteur="+idauteur);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
 
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='go()'>
					<option value='-1'>Aucun</option>
					<option value='4'>chien</option><option value='2'>oie</option><option value='3'>poule</option><option value='1'>renard</option>				</select>
 
				<label>Livres</label>
				<div id='divlivre' style='display:inline'>
				<select name='livre'>
					<option value='-1'>Choisir un auteur</option>
				</select>
				</div>
			</fieldset>
		</form>
 
	</body>
</html>

Décidemment je n'arrive pas à identifier d'où vient le problème. Et un grand merci pour votre aide