[HTML/Css/Javascript] Listes liées avec la librairie prototype

Listes liées avec la librairie prototype [HTML/Css/Javascript] - HTML/CSS - Programmation

Marsh Posté le 22-12-2009 à 15:20:27    

Bonjour,
Ne parvenant pas à me débrouiller avec les requêtes ajax, j'ai essayé de suivre des tutos utilisant la librairie prototype.
 
Ce que je veux, c'est faire 2 listes liées dynamiquement.
Donc un premier select, qui amène à faire une requete ajax, qui amène sur un fichier php utilisant la valeur du 1er select, et renvoie une valeur à mettre dans le 2nd select.
 
Voilà ce que ça donne:
http://gambetta.cahors.free.fr/exemple/
C'est à dire pas grand chose!
J'ai l'impression qu'il y a 2 soucis:
- le premier: la valeur choisie dans mon premier select n'est pas transmise dans le fichier .php
- le second: le résultat n'est pas transmis dans le 2nd select.
 
J'ai fait un paquet des qq fichiers de mon prog:
http://gambetta.cahors.free.fr/exemple/exemple.rar
 
En voici qq extraits:
Le form dans le fichier principal index.php

Code :
  1. <form method = "post" name = "socle" action="socle.php">
  2.  <p align = "center">
  3.  <select   name="tb1" id="tb1"   size=1  onchange='requete_ajax();'>
  4.   <?php
  5.   for ($nb=0;$nb<$max;$nb++)
  6.   {  $i=mysql_result($res,$nb,$table1_champ1);
  7.   echo '<option>'.$i.'</option>'; 
  8.   }
  9.   ?> 
  10.  </select>
  11.  <select    name="eleve" id="emplacement"   size=1>  </select>
  12.  </p>
  13.  <p>&nbsp;</p>
  14.         <p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>
  15. </form>


 
 
Ma fonction requete_ajax:

Code :
  1. function requete_ajax() {
  2. var url = 'remplir2ndselect.php';
  3. var parametres = 'tb1';//Les paramètres que l’on va fournir (par GET ou POST voir plus bas)
  4. var myAjax = new Ajax.Updater( //Création d’une requête Ajax toute faite !)
  5. 'emplacement', //Le nom du div qui va recevoir les infos de la page php lancée
  6. url, //url de la page lancée
  7. {
  8. method: 'get', //Méthode pour les paramètres (GET ou POST)
  9. parameters: parametres //Paramètres rentrés plus haut
  10. }
  11. );
  12. } //C’est tout !

 
 
Et le fichier php pour remplir le 2nd select:

Code :
  1. <?php
  2.    header('Content-type:text/html;charset=ISO-8859-1');
  3. include ('connexion.php');
  4. $table1='classe';
  5. $table2='socle';
  6. $table1_champ1='classe';
  7. $table2_champ1='classe';
  8. $table2_champ2='eleve';
  9. $choix1=$_GET['tb1'];
  10.    $rch="WHERE $table2_champ1 ='" .$choix1. "'";
  11.    $res=mysql_query("SELECT * FROM $table2 ".$rch);
  12.    $max=@mysql_num_rows($res);
  13. $t="";
  14.    for ($nb=0;$nb<$max;$nb++)
  15.    {  $i=mysql_result($res,$nb,"$table2_champ2" );
  16.       $t.="\t".$i; 
  17. }
  18. echo $t;
  19. echo 'bonjour';
  20. ?>


 
Help


Message édité par fabulon le 23-12-2009 à 18:27:23
Reply

Marsh Posté le 22-12-2009 à 15:20:27   

Reply

Marsh Posté le 22-12-2009 à 15:57:11    

verifie ton fichier 2nd select, peu importe l'option il ecrit rien
sinon ca a l'air bien parti


Message édité par stealth35 le 22-12-2009 à 15:57:55
Reply

Marsh Posté le 22-12-2009 à 17:17:12    

Le fichier remplir2ndselect.php en lui même fonctionne: si je le teste à part, il me sort bien les valeurs qu'il faut.
 
Il y a un souci avant: quand on arrive dans ce fichier remplir2ndselect.php, la variable 'tb1' n'est pas passée par la méthode get.
Il y a un souci après: les valeurs ne sortent pas de ce remplir2ndselect.php ne parviennent pas jusqu'à la deuxième balise select.
 
Bref, ça coince.

Reply

Marsh Posté le 22-12-2009 à 17:21:44    

non
quand j'ouvre ca

 

http://gambetta.cahors.free.fr/exe [...] ct.php?tb1

 

ca rend rien

 

faut faire
?type=tb1

 

echo $_GET['type']
te rendra 'tb1'


Message édité par stealth35 le 22-12-2009 à 17:22:53
Reply

Marsh Posté le 22-12-2009 à 17:44:19    

Si je tape ça: http://gambetta.cahors.free.fr/exe [...] php?tb1=6A
ça me renvoie: TOTO TUTU qui sont les 2 valeurs à mettre dans le select.
 

Citation :

faut faire
?type=tb1
 
 
echo $_GET['type']
te rendra 'tb1'


Où ça? Comprends pas.


Message édité par fabulon le 22-12-2009 à 17:44:39
Reply

Marsh Posté le 22-12-2009 à 18:16:20    

oui la c'est bon, mais ta requete n'envoie rien ca envoie
http://gambetta.cahors.free.fr/exe [...] ct.php?tb1

 

nul part tu lui dis de rendre  6A ou 6B
faut que dans ta fonction tu recureres le value du select


Message édité par stealth35 le 22-12-2009 à 18:18:29
Reply

Marsh Posté le 22-12-2009 à 18:34:47    

Citation :

faut que dans ta fonction tu recureres le value du select


Il me semblait que c'est ce que je faisais, puisque j'écris quelque chose qui ressemble à ça:
 
var myAjax = new Ajax.Updater( 'emplacement' , 'remplir2ndselect.php' { method: 'get', parameters: 'tb1' } );
 
'emplacement' est l'id qui va recevoir le résultat.
'remplir2ndselect.php' est le fichier qui est appelé et qui va être executé.
{ method: 'get', parameters: 'tb1' } indique que le paramètre (ou variable ?) qui va être transmis par la méthode get est 'tb1'.
 
Non?
 
 
 

Reply

Marsh Posté le 22-12-2009 à 18:41:11    

non la ca ta met rien
pas sur sur mais va falloir faire un truc du style
 

Code :
  1. var value = document.getElementbyId('tb1').value;
  2. var parametres = 'tb1=' + value;


Reply

Marsh Posté le 22-12-2009 à 18:52:36    

j'ai essayé ça:
 
function requete_ajax() {
 
var parametres = 'tb1=' + document.getElementbyId('tb1').value;
var myAjax = new Ajax.Updater( 'emplacement' , 'remplir2ndselect.php' { method: 'get', parameters: parametres } );  
 
}
 
Mais sans résultat.

Reply

Marsh Posté le 22-12-2009 à 19:23:22    

ouai, faut que tu trouve la fonction pour recuperé la valeur de ton select
 
document.getElementbyId('tb1').value te renvoi ton champs deja ?
 
sinon y'a avec  document.forms aussi
 
a toi de voir dans firebug les valeur de tout ca, de la recupere et de l'envoyer

Reply

Marsh Posté le 22-12-2009 à 19:23:22   

Reply

Marsh Posté le 22-12-2009 à 20:42:56    

J'ai essayé de voir ce que faisait firebug.
Voilà le 1er bug rencontré:
 
http://img687.imageshack.us/img687/9619/96855724.jpg
 
Je suis perplexe...


Message édité par fabulon le 22-12-2009 à 20:43:57
Reply

Marsh Posté le 22-12-2009 à 21:04:11    

c'est getElementById, avec les maj

Reply

Marsh Posté le 22-12-2009 à 21:19:29    

Ca avance!!!
 
Voilà où j'en suis:
http://img192.imageshack.us/img192/5476/capturegq.jpg
 
La fonction n'a, à priori, plus à être retouchée.  
Ensuite, dans les paramètres, il ne fallait pas mettre 'tb1=' mais au contraire prendre une nouvelle variable, et lui affecter la valeur de tb1.

Code :
  1. function requete_ajax() {
  2. var valeur = window.document.getElementById("tb1" ).value;
  3. var parametres = 'classe='+valeur;
  4. var myAjax = new Ajax.Updater( 'emplacement' , 'remplir2ndselect.php' , { method: 'get', parameters: parametres } );
  5. }


 
C'est au niveau du remplissage du 2nd select que ça foire.

Code :
  1. <?php
  2.    header('Content-type:text/html;charset=ISO-8859-1');
  3. include ('connexion.php');
  4. $table1='classe';
  5. $table2='socle';
  6. $table1_champ1='classe';
  7. $table2_champ1='classe';
  8. $table2_champ2='eleve';
  9. $classe=$_GET['classe'];
  10.    $rch="WHERE $table2_champ1 ='" .$classe. "'";
  11.    $res=mysql_query("SELECT * FROM $table2 ".$rch);
  12.    $max=@mysql_num_rows($res);
  13. $t="";
  14.    for ($nb=0;$nb<$max;$nb++)
  15.    {  $i=mysql_result($res,$nb,"$table2_champ2" );
  16.       $t.="\t".$i; 
  17. }
  18. echo $t;
  19. ?>


 
Cela renvoie les valeurs espacées par un espace.
 
C'est la mise en forme dans le select du prog principal qui merde:
 

Code :
  1. <form method = "post" name = "socle" action="socle.php">
  2.  <p align = "center">
  3.  <select onChange="requete_ajax();" size="1" id="tb1" name="tb1">
  4.   <?php
  5.   for ($nb=0;$nb<$max;$nb++)
  6.   {  $i=mysql_result($res,$nb,$table1_champ1);
  7.   echo '<option>'.$i.'</option>'; 
  8.   }
  9.   ?> 
  10.  </select>
  11.  <select   name="eleve" id="emplacement"   size=1>  </select>
  12.  </p>
  13.  <p>&nbsp;</p>
  14.         <p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>
  15. </form>


Message édité par fabulon le 22-12-2009 à 21:24:29
Reply

Marsh Posté le 22-12-2009 à 21:28:35    

faut affiche les options apres
 
par contre ton truc pour allé cherché les données c'est vraiment pa terrible
on utilise fetch
 

Code :
  1. while($data = mysql_fetch_assoc)
  2. {
  3.    echo '<option>' . $data['champs'] . '</option>';
  4. }


 
autre question t'a quel version de PHP ?

Reply

Marsh Posté le 22-12-2009 à 21:52:26    

Je viens d'utiliser ceci, et CA MARCHE!

Code :
  1. <?php
  2.    header('Content-type:text/html;charset=ISO-8859-1');
  3. include ('connexion.php');
  4. $table1='classe';
  5. $table2='socle';
  6. $table1_champ1='classe';
  7. $table2_champ1='classe';
  8. $table2_champ2='eleve';
  9. $classe=$_GET['classe'];
  10.     $liste_eleve = "";
  11.       $SQL = "SELECT * FROM $table2 WHERE $table2_champ1 ='" .$classe. "'";
  12.       $res = mysql_query($SQL);
  13.       while($val = mysql_fetch_array($res))
  14.          $liste_eleve .= "<option value=\"".$val[0]."\">".$val[0]."</option>\n";
  15. echo $liste_eleve;
  16. ?>


 
Par rapport à ce que tu viens d'écrire, en quoi c'est différent?
 
 
Sinon, en local, j'utilise wamp 2.0i, donc php 5.x


Message édité par fabulon le 22-12-2009 à 21:52:42
Reply

Marsh Posté le 22-12-2009 à 21:56:24    

c'est plus claire,  
et sinon

Code :
  1. $table1='classe';
  2. $table2='socle';
  3. $table1_champ1='classe';
  4. $table2_champ1='classe';
  5. $table2_champ2='eleve';


ca sert a rien
 
et sur ton serveur ca sera quoi comme version de php ?

Reply

Marsh Posté le 22-12-2009 à 21:58:33    

Exact pour mes 5 lignes... c'était juste pour me repérer par rapport à un autre tuto.
 
Sur mon serveur, ce sera chez Free.
 
 
Sinon, ARGhhh :fou:  Ca ne fonctionne pas avec IE !!!

Reply

Marsh Posté le 22-12-2009 à 22:01:42    

je pense que ca vien du

 

getElementById

 

essaye de faire un alert (zik !!!) voir ce que ca donne et si ca rend bien le value

 

sinon pourquoi avoi rajouter  window avant document ?


Message édité par stealth35 le 22-12-2009 à 22:02:44
Reply

Marsh Posté le 22-12-2009 à 22:08:39    

le window avant, c'était juste un essai pour être sur. Cela ne sert à rien en effet.
 
 
Le alert sous FF renvoie la bonne valeur (on s'en serait douté)
Mais il ne renvoie rien sous IE


Message édité par fabulon le 22-12-2009 à 22:11:31
Reply

Marsh Posté le 22-12-2009 à 22:19:15    

J'ai aussi essayé ça:
var valeur =document.socle['tb1'].value;
 
Ca marche sous FF, mais pas sous IE (le alert ne renvoie rien)

Reply

Marsh Posté le 23-12-2009 à 17:40:38    

On va cloturer ce post, car le 1er problème est résolu, à savoir utiliser prototype. (c'est ok sous FF)
 
Je vais ouvrir un 2nd post pour voir ce qui cloche entre le document.getElementById et IE

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed