[AJAX] Double Menu déroulant dynamique
Bonjour,
Je suis dans l'atelier 13-4 de Mr Defrance :
Je suis aller voir dans le code source mais le problème n'est pas résolu .
(bibliothèque json.js utilisée et new XMLHttpRequest).
Dès lors ou il y'a un caractère spécial dans le menu déroulant des prénoms l'historique des gains ne fonctionne plus du tout! ce qui n'a plus vraiment d'intérêt puisque c'est justement le but de cet atelier d'apprentissage.
J'ai essayé encodage utf8 ou iso sans résultat
.
Admettons que je fasse ceci:
fichier insertion.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
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<form method="post" action="insertion.php" >
<input type="text" name="prenom"/>
<input type="text" name="nom"/>
<input type="submit" name="valider" value="Valider"/>
</form>
<?php
include('connexionMysql.php');
if(isset($_POST['valider']))
{
if($_POST['valider'] == 'Valider')
{
// mb_convert_encoding($texte_a_convertir, "ISO-8859-1", "UTF-8");
$nom = $_POST['nom'];
$prenom= $_POST['prenom'];
$query = mysql_query("INSERT INTO joueurs SET nom='".$nom."', prenom='".$prenom."' ")
or die(mysql_error());
}
} |
Le fichier gainListe.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
|
<?php
//indique que le type de la réponse renvoyée au client sera du Texte
header("Content-Type: text/plain ; charset=utf-8");
//anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
//anti Cache pour HTTP/1.0
header("Pragma: no-cache");
//recuperation du parametre nom
if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'];
else $nom="inconnu";
//recuperation du parametre prenom
if(isset($_REQUEST['prenom'])) $prenom=$_REQUEST['prenom'];
else $prenom="inconnu";
//récup des paramètres de connexion Mysql : $connexionMysql
require_once('connexionMysql.php');
//Sélection de la base de données
mysql_select_db($base);
//Création et envoi de la requête SQL
$commandeSQL="SELECT gains.montant, gains.date FROM gains, joueurs WHERE gains.joueursID=joueurs.ID AND joueurs.prenom='".$prenom."' AND joueurs.nom='".$nom."' ";
$reponseSQL = mysql_query($commandeSQL);
//init des variables
$debut = true;
$nbColonnes=mysql_num_fields($reponseSQL);
echo "{\"gains\":[";//début de l'objet gains et du tableau des résultats
//test si il y a des résultats
if (mysql_num_rows($reponseSQL)){
//boucle sur les différentes lignes de résultats
while ($ligne = mysql_fetch_array($reponseSQL)) {
//gestion de l'accolade du début
if ($debut){
echo "{";
$debut = false;
} else {
echo ",{";
}
//boucle sur les colonnes de chaque résultat
for($j=0;$j<$nbColonnes;$j++){
$colonne=mysql_field_name($reponseSQL,$j);
echo "\"".$colonne."\":\"". utf8_encode($ligne[$colonne])."\"";
if ($j != $nbColonnes-1) echo ","; //conditionne la virgule la dernière colonne
}//fin du for
echo "}";
}//fin du while
}//fin du if
//-------
echo "]}";//cloture le tableau et l'objet
?> |
Le fichier index.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
|
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>atelier13-4 : Machine à sous - ASYNCHRONE</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type="text/javascript" src="fonctionsAjax.js"></script>
<script type="text/javascript" src="fonctionsMachine.js"></script>
<script type="text/javascript" src="json.js"></script>
</head>
<body>
<img src="../../commun/logo.jpg" width="600" height="100">
<h2> Atelier13-4 </h2>
<div id="page">
<!--zone du résultat-->
<div id="info">Bravo, <span id="gagnant"></span> vous avez gagné <span id="resultat"></span> Euros</div>
<!--zone du chargeur-->
<img id="charge" src="chargeur.gif" />
<!--zone du formulaire-->
<div id="formulaire">
<form>
<?php
require_once('connexionMysql.php');
mysql_select_db($base);
$requeteSQL="SELECT DISTINCT nom FROM joueurs ORDER BY nom";
$reponseSQL = mysql_query($requeteSQL);
echo "<select name='nom' id='nom' >";
echo "<option value=''>Sélectionner votre nom</option>";
while ($donnees = mysql_fetch_array($reponseSQL)) {
echo "<option value='".$donnees['nom']."'> ".$donnees['nom']." </option>";
}
echo "</select>";
?>
-
<select name='prenom' id='prenom' >
<option selected="selected" >Sélectionner votre prénom</option>
</select>
puis
<input name="button" id="button" type="button" value="JOUER" />
</form>
</div>
</div>
<!--liste des gains-->
<div id="commentaire">
<div align="center">Historique des gains
</div>
<table width="400" border="1" align="center" cellspacing="0" >
<tbody id="tableListe">
<tr>
<td>
Pas encore de gain
</td>
<td>?</td>
</tr>
</tbody>
</table>
</div>
<!--commentaires sur l'atelier-->
<div id="commentaire">
<ul><li>Avec Cde SQL d'insertion des gains par joueur</li>
<li>Avec Cde SQL pour afficher l'historique des gains du joueur</li>
<li><strong>Avec Cde SQL pour gérer un double menu dynamique</strong></li>
</ul>
</div>
</body>
</html> |
prenomsListe.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
|
//indique que le type de la réponse renvoyée au client sera du Texte
header("Content-Type: text/plain ; charset=utf-8");
//anti Cache pour HTTP/1.1
header("Cache-Control: no-cache , private");
//anti Cache pour HTTP/1.0
header("Pragma: no-cache");
//recuperation du parametre nom
if(isset($_REQUEST['nom'])) $nom=$_REQUEST['nom'];
else $nom="inconnu";
//récup des paramètres de connexion Mysql : $connexionMysql
require_once('connexionMysql.php');
//Sélection de la base de données
mysql_select_db($base);
//Création et envoi de la requête SQL
$commandeSQL="SELECT prenom FROM joueurs WHERE nom='".$nom."'";
$reponseSQL = mysql_query($commandeSQL);
//init des variables
$debut = true;
$nbColonnes=mysql_num_fields($reponseSQL);
echo "{\"listePrenoms\":[";//début de l'objet gains et du tableau des résultats
//test si il y a des résultats
if (mysql_num_rows($reponseSQL)){
//boucle sur les différentes lignes de résultats
while ($ligne = mysql_fetch_array($reponseSQL)) {
//gestion de l'accolade du début
if ($debut){
echo "{";
$debut = false;
} else {
echo ",{";
}
//boucle sur les colonnes de chaque résultat
for($j=0;$j<$nbColonnes;$j++){
$colonne=mysql_field_name($reponseSQL,$j);
echo "\"".$colonne."\":\"". utf8_encode($ligne[$colonne])."\"";
if ($j != $nbColonnes-1) echo ","; //conditionne la virgule la dernière colonne
}//fin du for
echo "}";
}//fin du while
}//fin du if
//-------
echo "]}";//cloture le tableau et l'objet
?> |
le fichier fonctionsMachine.js
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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
|
// JavaScript Document
window.onload=testerNavigateur;
//-----------------------------
function testerNavigateur() {
objetXHR = creationXHR();
if(objetXHR==null) {
document.getElementById("button").disabled= true;
var erreurNavigateur="Erreur Navigateur : Création d'objet XHR impossible";
remplacerContenu("info", erreurNavigateur);
document.getElementById("info").style.visibility="visible";
}
document.getElementById("button").onclick=jouer;
document.getElementById("nom").onchange=function() {recupPrenoms(this.value);}
document.getElementById("prenom").onchange=demandeGains;
}
//##############################MOTEUR AJAX 1############################################
function jouer() {
/*-----------------------------Config et envoi de la requete ASYNCHRONE : */
objetXHR = creationXHR();//création d'un objet XHR multi-navigateurs
var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
//construction de la chaine des parametres
var parametres = "nom="+ codeContenu("nom") +
"&prenom="+ codeContenu("prenom") +
"&anticache="+temps ;
//Config. objet XHR
objetXHR.open("get","gainAleatoire.php?"+parametres, true);
objetXHR.onreadystatechange = actualiserPage;//désignation de la fonction de rappel
//gestion du bouton et du chargeur
document.getElementById("button").disabled= true;
document.getElementById("charge").style.visibility="visible";
objetXHR.send(null);//envoi de la requete
/*---------------------------------------- */
}
function actualiserPage() {
if (objetXHR.readyState == 4) {//test si le résultat est disponible
if (objetXHR.status == 200) {
demandeGains();
var nouveauResultat = objetXHR.responseText.split(":");//recup du résulat > tableau
//actualisation du résultat
remplacerContenu("resultat", decodeURI(nouveauResultat[1]));
//actualisation du nom
remplacerContenu("gagnant", decodeURI(nouveauResultat[0]));
//affiche la zone info
document.getElementById("info").style.visibility="visible";
//gestion du bouton et du chargeur
document.getElementById("button").disabled= false;
document.getElementById("charge").style.visibility="hidden";
}else{
//message d'erreur serveur
var erreurServeur="Erreur serveur : "+objetXHR.status+" – "+ objetXHR.statusText;
remplacerContenu("info", erreurServeur);
document.getElementById("info").style.visibility="visible";
//gestion du bouton et du chargeur
document.getElementById("button").disabled= false;
document.getElementById("charge").style.visibility="hidden";
//annule la requete en cours
objetXHR.abort();
objetXHR=null;
}
}
}
//##############################MOTEUR AJAX 3############################################
function demandeGains() {
//création d'un objet XHR multi-navigateurs
objetXHR3 = creationXHR();
var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
//construction de la chaine des parametres
var parametres3 = "nom="+ codeContenu("nom") +
"&prenom="+ codeContenu("prenom") +
"&anticache="+temps ;
//Config. objet XHR
objetXHR3.open("get","gainListe.php?"+parametres3, true);
objetXHR3.onreadystatechange = afficheGains;//désignation de la fonction de rappel
objetXHR3.send(null);//envoi de la requete
}
function afficheGains() {
if (objetXHR3.readyState == 4) {//test si le résultat est disponible
if (objetXHR3.status == 200) {
listeJSON = objetXHR3.responseText;//recup du résulat > objet JSON
objetJSON3=listeJSON.parseJSON();
//créa des nouvelles lignes
var tableListe=document.getElementById("tableListe");
supprimerContenu(tableListe);
for(i=0;i<objetJSON3.gains.length;i++){
var montant=objetJSON3.gains[i].montant;
var date=objetJSON3.gains[i].date;
nouvelleLigne(tableListe,date,montant);
}
}else{
//message d'erreur serveur
var erreurServeur="Erreur serveur : "+objetXHR3.status+" – "+ objetXHR3.statusText;
remplacerContenu("info", erreurServeur);
document.getElementById("info").style.visibility="visible";
//gestion du bouton et du chargeur
document.getElementById("button").disabled= false;
//annule la requete en cours
objetXHR3.abort();
objetXHR3=null;
}
}
}
//-----------------------------------------
function nouvelleLigne(tab,text1,text2) {
var nouveauTR=document.createElement('tr');
//-----------------------------------------
var nouveauTD1=document.createElement('td');
var nouveauTXT1=document.createTextNode(text1);
nouveauTD1.appendChild(nouveauTXT1);
var nouveauTD2=document.createElement('td');
var nouveauTXT2=document.createTextNode(text2);
nouveauTD2.appendChild(nouveauTXT2);
//------------------------------------------
nouveauTR.appendChild(nouveauTD1);
nouveauTR.appendChild(nouveauTD2);
//------------------------------------------
tab.appendChild(nouveauTR);
}
//##############################MOTEUR AJAX 4############################################
function recupPrenoms(nom) {
//reinitialise les options du menu 2 a chaque changement
document.getElementById("prenom").options.length = 1;
//cas ou il n'y a pas de nom sélectionné
if (nom == "") return null ;
//--------------------
objetXHR4 = creationXHR();//création d'un objet XHR multi-navigateurs
var temps = new Date().getTime();//création d'une variable temps pour l'anti-cache
//construction de la chaine des parametres
var parametres = "nom="+ nom +
"&anticache="+temps ;
//Config. objet XHR
objetXHR4.open("get","prenomsListe.php?"+parametres, true);
objetXHR4.onreadystatechange = creationMenu2;//désignation de la fonction de rappel
//gestion du bouton et du chargeur
objetXHR4.send(null);//envoi de la requete
/*---------------------------------------- */
}
function creationMenu2(){
if (objetXHR4.readyState == 4) {//test si le résultat est disponible
if (objetXHR4.status == 200) {
//recup du résulat au format TXT
var nouveauResultat = objetXHR4.responseText;
//conversion de chaine JSON en objet JSON
var objetJSON=nouveauResultat.parseJSON();
//création du menu dans le DOM>>dans fonction de rappel
for (i=0; i<objetJSON.listePrenoms.length; i++)
{
var elementOption = document.createElement('option');
var texteOption = document.createTextNode(objetJSON.listePrenoms[i].prenom);
elementOption.setAttribute('value',objetJSON.listePrenoms[i].prenom);
elementOption.appendChild(texteOption);
document.getElementById("prenom").appendChild(elementOption);
}
}
}
} |
