[AJAX] Compatibilité en AJAX

Version imprimable

bonjour voici mes codes:

ma base de donnée nommée foot:

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;

premiere page nomée selectionjoueurs.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
83
84
85
86
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<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>
				<div id='joueur1' style='display:inline'>
				<select name='joueur' id='joueur'>
					<option value='-1'>Choisir un joueur</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

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

Mon probleme est le suivant:
lorsque je test mes pages sous FireFox et Opéra, tout fonctionne correctement. Losque je passe sous IE8 la premiere liste s'effectue normalement mais la deusieme devient blanche et aucun texte n'apparait ( IE7 faisait la meme chose).
J'aimerai savoir si c'est à cose de mon code que ca merdouille.

merci d'avance

dadal56

08/04/2009, 17h27
E.Bzz
Bonjour,

Citation:

Envoyé par dadal56

J'aimerai savoir si c'est à cose de mon code que ca merdouille.

Oui, forcément ;)
Code:

1 2 3 while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row["no_joueur"]."'>".$row["joueur"]."</option>\n"; }
Pour IE, il faut ramener le select entier (avec <select> et </select>) et pas seulement les options ...

A+
08/04/2009, 17h33
dadal56

Histoire de <select>

j'ai essayé en mettant le select mais cela ne fonctionn pa. il me met une liste déroulante dans un autre et ca fait beuggué!!!
Losrque je mets le <select> il ne m'affiche plus rien, comme s'il n'y avait plus de passage de paramettre ( pour la deuxieme liste)!!!!

mais pourqoui ca fonctionne correctement sous FF et opéra?

cincerement

dadal56
08/04/2009, 17h37
E.Bzz
Forcément, si tu récupères ton select ... à l'intérieur de ton select, ça va pas marcher.

Il faut que tu modifies la destination de la réponse Ajax : ce n'est plus le select, mais son conteneur.
Pour simplifier, mets ton select dans un <span>, et mets à jour ce span avec la réponse Ajax à la place de
Code:

1 2 di = document.getElementById('joueur'); di.innerHTML = xhr.responseText;
Ca sera donc "id_du_span" à la place de "joueur" ...

A+
08/04/2009, 17h44
dadal56

yahouuu ca fonctionne!!!!!

merci beaucoup!!!!

ca fonctionne nikel!!!!

puis-je vous poser une derniere question?

Si je veux faire ce même formulaire mais en un boucle de 14 fois.

comment dois-je procéder?
en php je vois comment faire mais avec de l'ajax dedans, je nage un peu vu que je suis débutant en ajax.

merci d'avance!

dadal56
08/04/2009, 17h48
E.Bzz

Citation:

Envoyé par dadal56

Si je veux faire ce même formulaire mais en un boucle de 14 fois.

Pas bien compris.

Mais a priori, il suffit de gérer un compteur dans la boucle pour pouvoir différencier les name et id (si présents) des objets répétés ...

A+

1 pièce(s) jointe(s)

explication de la boucle des 14!

voila,
le model auquel je voudrai me rapprocher est celui en pièce jointe!

je vois comment faire la boucle en php mais le pb c le passage de tous les paramettres en ajax!! et la récupération sur la seconde page!!

ce passage là:

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
 
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('sjoueur');
						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);
 
 
			}

merci d'avance
et à bientot

dadal56

Il suffit de passer en paramètre à ta fonction change() la valeur du compteur courant.
Tu pourras ainsi récupérer le bon n° d'équipe
Code:

1 2 3 4 function change(param_compteur) { .... .... idequipe = document.getElementById('equipe'+param_compteur).options[document.getElementById('equipe'+param_compteur).selectedIndex].value;
et mettre à jour le bon select
Code:

1 2 di = document.getElementById('sjoueur'+param_compteur); di.innerHTML = xhr.responseText;
A+