[AJAX] listes liées - passage de parametres

Version imprimable

Bonjour,
Depuis hier j'essais de me faire à l'ajax pour 2 listes liées.
j'ai pris le script de cette page.

donc ma base c'est:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
create table equipes(
no_equipe smallint (2) not null,
nom_equipe varchar (20) not null,
primary key (no_equipe)
)TYPE=INNODB;
 
create table joueurs(
no_joueur smallint(3) not null,
no_equipe smallint(2) not null,
joueur varchar(50) not null,
primary key (no_joueur),
foreign key (no_equipe) references equipes(no_equipe)
)TYPE=INNODB;

ma page principale:
nommée ajax.php

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
 
<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.getElementByNo_joueurs('joueurs').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","selectequipe.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.getElementByNo_equipe('equipe');
				no_equipe = sel.value;
				xhr.send("no_equipe="+no_equipe);
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Sélections</legend>
				<label>sélection de l'équipe</label>
				<select name='equipe' id='equipe' onchange='go()'>
					<option value='-1'>Aucun</option>
					<?php
						mysql_connect("localhost","","");
						mysql_select_db("test");
						$res = mysql_query("SELECT * FROM equipes ORDER BY no_equipe");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value=\"".$row['no_equipe']."\">".$row['nom_equipe']."</option>\n";
 
						}	
								?>
 
 
 
				</select>
				<label>joueurs</label>
				<div id='joueur' style='display:inline'>
				<select name='joueur'>
					<option value='-1'>Choisir un joueur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

et ma seconde page:
nommée selectequipe.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
	echo "<select name='joueur'>";
	if(isset($_POST["no_equipe"])){
		mysql_connect("localhost","","");
		mysql_select_db("test");
		$res = mysql_query("SELECT 'no_joueur', 'joueur' FROM joueurs 
			WHERE 'no_equipe'=".$_POST["no_equipe"]." ORDER BY joueur");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["no_joueur"]."'>".$row["joueur"]."</option>";
		}
	}
 
	echo "</select>";
?>

voila pour les pages de codes!

Maintenant voici mon probleme:
j'obtiens correctement ma premiere liste mais je ne peux afficher un résultat dans la seconde.
Je pense que mon probleme est dans le passage de donnée en POST pour ma seconde page.
De plus, j'utilise WAMP SERVER, je ne sais pas si mes problemes viennent de là.
Merci de m'éclairer pour faire fonctionner mes listes.

dadal56

07/04/2009, 17h04
Bovino

Code:

sel = document.getElementByNo_equipe('equipe');

Original ;)
Désolé, mais getElementByNo_equipe, ça n'existe pas !

EDIT :

Code:

sel = document.getElementById('equipe');
07/04/2009, 17h36
dadal56

essais infructueux

J'ai effectué la modification proposée ci-dessus, mais ça ne fonctionne toujours pas!

:cry:

merci de m'aider!!!

dadal56
07/04/2009, 17h37
Bovino

Ah, il y en avais un autre !

Code:

document.getElementByNo_joueurs('joueurs').innerHTML = leselect;

à remplacer par

Code:

document.getElementById('joueurs').innerHTML = leselect;
07/04/2009, 18h26
dadal56

toujours le meme probleme

j'ai egalement effectué cette modification mais cela ne fonctionne toujours pas.

merci de continuer à m'aider
07/04/2009, 19h43
Bovino
Alors, pour pouvoir regarder plus en détail, il faudrait :
- Le code HTML généré plutôt que le PHP (clic droit, voir source copier/coller le code HTML)
- Le contenu du responseText : avec FF et Firebug, tu l'as dans la console.

code source html

Voici le code soucre html généré par le code.
De plus, j'ai modifier un pe le code dans le head.

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
 
<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);//le mettre en commentaire lorsque le code est fini
					// 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('joueurs');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","selectequipe.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
				idequipe = document.getElementById('equipes').options[document.getElementById('equipes').selectedIndex].value;
				//alert(idauteur);
				xhr.send("idEquipe="+idequipe);
 
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
 
				<legend>Sélection des joueurs</legend>
				<label>Equipes</label>
				<select name='auteur' id='auteur' onchange='change()'>
					<option value='-1'>Aucune équipe</option>
					<option value='1'>Séniors A</option><option value='2'>Séniors B</option><option value='3'>Séniors C</option><option value='4'>- 18</option><option value='5'>- 15</option><option value='6'>- 13</option><option value='7'>Benjamins A</option><option value='8'>Benjamins B</option><option value='9'>Poussins A</option><option value='10'>Poussins B</option><option value='11'>Débutants</option><option value='12'>Vétérants</option>				</select>
 
				<label>joueurs</label>
				<div id='joueur' style='display:inline'>
				<select name='joueur'>
					<option value='-1'>Choisir un joueur</option>
				</select>
				</div>
			</fieldset>
		</form>
 
	</body>
</html>

07/04/2009, 20h09
Bovino
Code:

1 2 3 4 5 <div id='joueur' style='display:inline'> <select name='joueur'> <option value='-1'>Choisir un joueur</option> </select> </div>
D'une part, donner la même valeur à l'id de la div et au name du select est une mauvaise idée, car IE à tendance à confondre les deux et cela va le gêner.
Ensuite, tu récupères des balises options de ta requête mais tu les insères dans une div, le select disparait donc rien n'est affiché.
Essaye en mettant l'id sur le select (et tu peux en profiter pour supprimer la div qui n'est pas très utile à priori !)
Code:

1 2 3 <select name='joueur' id='joueur'> <option value='-1'>Choisir un joueur</option> </select>
EDIT :
Et puis

Code:

di = document.getElementById('joueurs');

:nono: le nom de l'id c'est joueur sans le s !

J'ai réussi!!!!!!! enfin une partie....

voila!!!!
j'ai réussi en bidouillant le code! lol

Code de la premiere 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
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
 
<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);//le mettre en commentaire lorsque le code est fini
					// 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('joueur');
						di.innerHTML = xhr.responseText;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","selectequipe.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
				idequipe = document.getElementById('equipe').options[document.getElementById('equipe').selectedIndex].value;
				//alert(idauteur);
				xhr.send("no_equipe="+idequipe);
 
 
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Sélection des joueurs</legend>
				<label>Equipes</label>
				<select name='equipe' id='equipe' onchange='change()'>
					<option value='-1'>Aucune équipe</option>
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("foot");
						$res = mysql_query("SELECT * FROM equipes ORDER BY no_equipe");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["no_equipe"]."'>".$row["nom_equipe"]."</option>";
						}	
					?>
				</select>
				<label>joueurs</label>
 
				<select name='joueur' id='joueur'>
					<option value='-1'>Choisir un joueur</option>
				</select>
 
			</fieldset>
		</form>
	</body>
</html>

et voici le code de ma seconde page nommé selectequipe.php:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<?php
 
	//echo "<select name='joueur'>";
	if(isset($_REQUEST["no_equipe"])){
		mysql_connect("localhost","root","");
		mysql_select_db("foot");
		$res = mysql_query("SELECT no_joueur,joueur FROM joueurs WHERE no_equipe=".$_REQUEST["no_equipe"]." ORDER BY joueur");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["no_joueur"]."'>".$row["joueur"]."</option>\n";
		}
	}
 
	//echo "</select>";
?>

tout marche bien sur FireFox, mais ca ne marche pas sur IE 7.
J'arrive pa à comprendre.

Merci pour votre aide! ... si vous pouviez m'aider un pe plus ce serait génial!!!

merci d'avance

dadal56