[AJAX] Double Menu déroulant dynamique

**pit0n** · 03/02/2012, 16h26

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 :

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
 
  <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 :

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
 
 
<?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 :

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
 
 
<!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>&nbsp;vous avez gagné <span id="resultat"></span>&nbsp;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 :

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
 
 
 
//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 :

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
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); 
			}
	}
	}
}

**pit0n** · 03/02/2012, 18h26

En mettant de l'iso dans la base et après réception des données dans la seconde liste , celle des prénoms,
l'historique des gains qui s'insère dans la base en fonction de la sélection du prénom s'affiche mais l'affichage de la liste des prénoms est en iso !

Je ne vois pas l'erreur , si quelqu'un avait une idée car je tourne en rond .

c'est peut être dû à parseJSON() car en entrée comme en sortie c'est bien l'encodage utf8 que j'utilise ! mais je ne connais pas encore assez bien
json.

**pit0n** · 03/02/2012, 18h53

Bon je bloque , je vais remplacer les accents pour le moments et autres caractères spéciaux.

**NoSmoking** · 03/02/2012, 18h59

Bonjour,
peut être as tu déjà lu Passez à l'UTF-8 sans manquer une étape

**pit0n** · 05/02/2012, 00h41

Merci NoSmoking , Brooklyn Boogie est sympa aussi

Si un jour quelqu'un à le même problème la solution était qu'il ne faut pas utiliser
decode_utf8() lors de la restitution des données car elles sont déjà encodées en utf8 .

[AJAX] Double Menu déroulant dynamique

AJAX

Vue hybride

Discussions similaires

Partager

Partager