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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : [HTML/Css/Javascript] Listes liées avec la librairie prototype

fabulon

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 :

<form method = "post" name = "socle" action="socle.php">
<p align = "center">
<select name="tb1" id="tb1" size=1 onchange='requete_ajax();'>
<?php
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,$table1_champ1);
echo '<option>'.$i.'</option>';
}
?>
</select>
<select name="eleve" id="emplacement" size=1> </select>
</p>
<p> </p>
<p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>
</form>

Ma fonction requete_ajax:

Code :

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

Et le fichier php pour remplir le 2nd select:

Code :

<?php
header('Content-type:text/html;charset=ISO-8859-1');
include ('connexion.php');
$table1='classe';
$table2='socle';
$table1_champ1='classe';
$table2_champ1='classe';
$table2_champ2='eleve';
$choix1=$_GET['tb1'];
$rch="WHERE $table2_champ1 ='" .$choix1. "'";
$res=mysql_query("SELECT * FROM $table2 ".$rch);
$max=@mysql_num_rows($res);
$t="";
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,"$table2_champ2" );
$t.="\t".$i;
}
echo $t;
echo 'bonjour';
?>

Help

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

Publicité

stealth35

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

fabulon

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.

stealth35

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

fabulon

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

stealth35

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

fabulon

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?

stealth35

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

Code :

var value = document.getElementbyId('tb1').value;
var parametres = 'tb1=' + value;

fabulon

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.

stealth35

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

Publicité

fabulon

J'ai essayé de voir ce que faisait firebug.
Voilà le 1er bug rencontré:

Je suis perplexe...

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

stealth35

c'est getElementById, avec les maj

fabulon

Ca avance!!!

Voilà où j'en suis:

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 :

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

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

Code :

<?php
header('Content-type:text/html;charset=ISO-8859-1');
include ('connexion.php');
$table1='classe';
$table2='socle';
$table1_champ1='classe';
$table2_champ1='classe';
$table2_champ2='eleve';
$classe=$_GET['classe'];
$rch="WHERE $table2_champ1 ='" .$classe. "'";
$res=mysql_query("SELECT * FROM $table2 ".$rch);
$max=@mysql_num_rows($res);
$t="";
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,"$table2_champ2" );
$t.="\t".$i;
}
echo $t;
?>

Cela renvoie les valeurs espacées par un espace.

C'est la mise en forme dans le select du prog principal qui merde:

Code :

<form method = "post" name = "socle" action="socle.php">
<p align = "center">
<select onChange="requete_ajax();" size="1" id="tb1" name="tb1">
<?php
for ($nb=0;$nb<$max;$nb++)
{ $i=mysql_result($res,$nb,$table1_champ1);
echo '<option>'.$i.'</option>';
}
?>
</select>
<select name="eleve" id="emplacement" size=1> </select>
</p>
<p> </p>
<p align="center"><input TYPE="submit" VALUE="Envoyer" ></p>
</form>

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

stealth35

faut affiche les options apres

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

Code :

while($data = mysql_fetch_assoc)
{
    echo '<option>' . $data['champs'] . '</option>';
}

autre question t'a quel version de PHP ?

fabulon

Je viens d'utiliser ceci, et CA MARCHE!

Code :

<?php
header('Content-type:text/html;charset=ISO-8859-1');
include ('connexion.php');
$table1='classe';
$table2='socle';
$table1_champ1='classe';
$table2_champ1='classe';
$table2_champ2='eleve';
$classe=$_GET['classe'];
$liste_eleve = "";
$SQL = "SELECT * FROM $table2 WHERE $table2_champ1 ='" .$classe. "'";
$res = mysql_query($SQL);
while($val = mysql_fetch_array($res))
$liste_eleve .= "<option value=\"".$val[0]."\">".$val[0]."</option>\n";
echo $liste_eleve;
?>

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

stealth35

c'est plus claire,
et sinon

Code :

$table1='classe';
$table2='socle';
$table1_champ1='classe';
$table2_champ1='classe';
$table2_champ2='eleve';

ca sert a rien

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

fabulon

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

stealth35

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

fabulon

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

fabulon

J'ai aussi essayé ça:
var valeur =document.socle['tb1'].value;

Ca marche sous FF, mais pas sous IE (le alert ne renvoie rien)

fabulon

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

Publicité

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
supprimer une option d'une liste avec javascript	Menu déroulant CSS
Problème de validation W3C (script pris pour du HTML)	html, simuler la touche ctrl sur un lien
PAGE HTML SANS CADRE POUR L INDEX ET TOUTE LES AUTRES PAGES	Protection contre injection HTML
Importer donné XML vers une page HTML	Problème de redimensionnement image en javascript
html et object image dans le lecteur avant visualisation	ouvrir une page html en plein écran avec flash
Plus de sujets relatifs à : [HTML/Css/Javascript] Listes liées avec la librairie prototype

Page générée en 0.080 secondes