|
|
|
|
Bonjour Tout le monde,
Excusez-moi du dérangement, mais depuis quelques jours, j'ai eu des soucis avec la conception d'une page web.
Ma page contient un formulaire dans lequel il y a 3 combobox, chacun devant afficher le contenu d'un champ d'une table de la base de donnée mais en même temps reliés entre eux.
C'est à dire en clair, en sélectionnant une valeur du premier combobox (se trouvant dans une table), le second affiche une liste de valeur dont les données sont liées au premier, et après avoir choisi également une valeur dans ce 2èm combobox, le troisième combobox aussi affiche une liste de valeurs dépendantes du 2èm combobox.
Je suis parvenu à relier les 2 premiers combobox, en créant une fonction javascript qui permet de relier le 1èr au second, mais j'arrive pas à faire de même pour le 3èm en créant une seconde fonction qui permettrait de relier les valeurs du 3èm au second.
Si quelqu'un a une idée, ça m'aiderait énormement. Si ça vous aiderait de voir mieux clair, je pourrai vous montrer le contenu de mon formulaire et de mes 3 tables.
Je vous remercie d'avance.
Configuration: Windows XP Firefox 3.0.5
J'ai galéré pour trouvé ca, mais j'ai réussi à le trouvé.. attend jte balance le code.. Il te faudrat 5 pages en tout..
<script type="text/javascript">
var Ld1Id=''; //initialisation des variables
var Ld2Id='';
var id_liste='';
function ValideLd2(val) {
Ld1Id=val; //id_service
id_liste='2';//Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd2.php?Ld1='+Ld1Id;
ObjetXHR(LD_URL)
// Réinitialisation de Ld3 si modification de LD1 après passage en Ld2
if (Ld2Id!='') {ValideLd3(''); }
}
function ValideLd3(val) {
Ld2Id=val; //id_cellule
id_liste='3'; //Utilisé dans la fonction ChargeLd() pour identifier la liste déroulante
var LD_URL = 'ValideLd3.php?Ld1='+Ld1Id+'&Ld2='+Ld2Id;
if (Ld2Id=='') {var LD_URL = 'ValideLd3.php';}
ObjetXHR(LD_URL)
}
function ObjetXHR(LD_URL) {
//creation de l'objet XMLHttpRequest
if (window.XMLHttpRequest) { // Mozilla,...
xmlhttp=new XMLHttpRequest();
//if (xmlhttp.overrideMimeType) {
//xmlhttp.overrideMimeType('text/xml');
//}
xmlhttp.onreadystatechange=ChargeLd;
xmlhttp.open("GET", LD_URL, true);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//xmlhttp.setRequestHeaders("Content-Encoding","latin1");
xmlhttp.setRequestHeader( "Content-type", "charset=utf-8" );
xmlhttp.send(null);
} else if (window.ActiveXObject) { //IE
xmlhttp=new ActiveXObject('Microsoft.XMLHTTP');
if (xmlhttp) {
xmlhttp.onreadystatechange=ChargeLd;
xmlhttp.open('GET', LD_URL, false);
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xmlhttp.send();
}
}
// Bouton non apparent car modification de LD1 ou Ld2
document.getElementById('buttons').style.display='none';
}
// fonction pour manipuler l'appel asynchrone
function ChargeLd() {
if (xmlhttp.readyState==4) {
if (xmlhttp.status==200) {
//span id="niv2" ou "niv3"
document.getElementById('niv'+id_liste).innerHTML=xmlhttp.responseText;
if (xmlhttp.responseText.indexOf('disabled')<=0) {
//focus sur liste déroulante 2 ou 3
document.getElementById('Liste'+id_liste).focus();
}
}
}
}
function Affiche_Btn() {
document.getElementById('buttons').style.display='inline';
}
</script>
Ensuite ben tu crée une page valideLD1.php (ta première liste déroulante) : et tu mets tout ca dedan..
<?PHP
include ("connexionBDD.php");//connexion a la BDD
$rq="Select..... ;"; // Ici tu fais la requete qui renvoi tout ce que tu veux afficher dan la première liste
$rq_pos_id=0; //position dans le SQL de la clé de la liste déroulante idem dans ValideLd2.php et ValideLd3.php
$rq_pos_val=1; //position dans le SQL de la valeur de la liste déroulante idem dans ValideLd2.php et ValideLd3.php
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '<select style="width: 320" name="Liste1" id="Liste1" size="1" onchange="ValideLd2(this[this.selectedIndex].value);">'; // Jte conseil de tout laissé par défault
$retour .= '<option selected value="">< Choisissez ></option>';
if (mysql_num_rows($result) != 0)
{
while ($row = mysql_fetch_row($result))
{
$retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
}
$retour .= '</select>';
} else {
$retour = '<input id="size" type="text" size="10" value="Aucune valeur" disabled>';
}
mysql_free_result($result);
mysql_close();
echo $retour;
Maintenant tu crées un autre fichier valideLD2.php et tu mets tout ça à l'intérieur: <?PHP
include ("connexionBDD.php");
$Ld1_retour =''; //id_département clé de la liste déroulante 1
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if ($Ld1_retour!='') {
$rq="Select ... from ... where ...=".$Ld1_retour.";";//Requete retournant les infos a afficher par rapport a la 1ere liste.
$rq_pos_id=0;
$rq_pos_val=1;
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" onchange="ValideLd3(this[this.selectedIndex].value);">';
$retour .= '<option selected value="">< Choisissez></option>';
if (mysql_num_rows($result) != 0) {
while ($row = mysql_fetch_row($result)) {
$retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
}
$retour .= '</select>';
} else {
$retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled><option>Aucune valeure</option></select>';
}
mysql_free_result($result);
mysql_close();
}else{
$retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled>Aucune valeure< Cellule ></option></select>';
}
echo $retour;
Ensuite le fichier valideLD3.php et tu mets tout ca :
<?PHP
include ("connexionBDD.php");
$Ld1_retour =''; //id_département clé de la liste déroulante 1
$Ld2_retour =''; //id_commune clé de la liste déroulante 2
if (isset($_GET['Ld1'])) {$Ld1_retour = $_GET['Ld1'];}
if (isset($_GET['Ld2'])) {$Ld2_retour = $_GET['Ld2'];}
if (($Ld1_retour!='')&&($Ld2_retour!='')) {
$rq="Select ..... from .....
WHERE ... =".$Ld1_retour."
AND .... =".$Ld2_retour.";";// Arange toi avec les requetes
$rq_pos_id=0;
$rq_pos_val=0;
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '<select style="width: 320" name="Liste3" id="Liste3" size="1" onchange="Affiche_Btn();">';
$retour .= '<option selected value="">< Choisissez ></option>';
if (mysql_num_rows($result) != 0) {
while ($row = mysql_fetch_row($result)) {
$retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
}
$retour .= '</select>';
} else {
$retour = '<select style="width: 320" name="Liste3" id="Liste3" size="1" disabled>Aucune valeure< Utilisateur ></option></select>';
}
mysql_free_result($result);
mysql_close();
}else{
$retour = '<select style="width: 320" name="Liste3" id="Liste3" size="1" disabled>Aucune valeure< Utilisateur ></option></select>';
}
echo $retour;
Voila et enfin ton formulaire, ta page ou tu affichera les 3 listes déroulantes tu mets ca : (Bon moi j'ai fais sous forme de tableau, je pense que tu fais pareil.. Reprends mon exemple..)
<?php
include ("scriptlistederoulante.js"); // Mets ça tout au début de ta page enfin dans le body quoi ;)
?>
<form action=".....php" method='post'><!-- formulaire -->
<table border="0" align="center"><!-- tableau sans bordure pour organiser et tout aligner -->
<tr>
<td class="titretab">1ere liste<font size="4" color="red">*</font> :</td>
<td>
<?php
include ("valideLd1.php");
?><!--Pour remplir la liste déroulante 1-->
</td>
</tr>
<tr>
<td class="titretab">2eme liste<font size="4" color="red">*</font> :</td>
<td>
<span id="niv2">
<?php
include ("valideLd2.php");
?></span> <!--Pour remplir la liste déroulante 2-->
</td>
<tr>
<td class="titretab">3eme liste<font size="4" color="red">*</font> :</td>
<td>
<span id="niv3">
<?php
include ("valideLd3.php");
?></span> <!--Pour remplir la liste déroulante 3-->
</td>
</tr>
</table>
Voila j'espère que t'a compri et que j'tai aidé.. Bon courage .. Si tu réussi dit moi, car moi j'ai un ptit soucis d'accent. J'aimerais savoir si tu aura le meme souci.. Cordialement [' Tu tr0uveras t0uj0urs plus f0rt que t0i '] |
Répondre à 974_Vin's_974
|
Ca blok a kel niveau ??? si tu veux j'ai une autre solution, qui ressemble un peu à ça, et je comprend bcp mieu.. Car cette solution je l'ai trouvé sur un tuto, mais il é pas vraiment optimum, et hier jai optimiser la chose, du coup je comprends beaucoup mieux.. Enfin si tu veux on peux reprendre, je te renvoi un otre code.. [' Tu tr0uveras t0uj0urs plus f0rt que t0i ']
|
Ok ben atten je te donne l'autre, il est plus simple... Il te faudra remplacer les codes dans les pages..
include ("connexionBDD.php"); //Connexion BDD
$rq="Select ... FROM ..."; //Requete retournant les éléments que tu souhaite afficher dans la premiere ligne
$rq_pos_id=0; //position dans le SQL de la clé de la liste déroulante
$rq_pos_val=1; //position dans le SQL de la valeur de la liste déroulante
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '<select style="width: 320" name="Liste1" id="Liste1" size="1" onchange="remplir_form(this[this.selectedIndex].value);">';
$retour .= '<option selected value="">< Choisissez ></option>';
if (mysql_num_rows($result) != 0)
{
while ($row = mysql_fetch_row($result))
{
$retour .= '<option value="'. $row[$rq_pos_id] .'">'. $row[$rq_pos_val] .'</option>';
}
$retour .= '</select>';
} else {
$retour = '<input id="size" type="text" size="10" value="Aucune valeur" disabled>';
}
mysql_free_result($result);
mysql_close();
echo $retour;
Ensuite la page scriptlistederoulante.js : (completement diférente)
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,pouvez-vous le mettre à jour?...");
xhr = false;
}
return xhr;
}
function remplir_form(idServ)
{
//pour l'exemple on recupere l'id courant à l'intérieur de la fonction
//mais normalement c'est un parametre à passer à la fonction....
var Ld1Id=idServ;
var xhr = getXhr();
// On définit ce qu'on va faire quand on aura la réponse
//pour les methodes de l'objet xhr allez faire un tour le net;)
xhr.onreadystatechange = function()
{
// 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)
{
//la reponse est retournée au format texte(pour faire de l'ajaX le format de retour doit etre du Xml....)
lareponse = xhr.responseText;
//allez :il faut traiter la chaine de caractere renvoyee par le script php(action.php)
var w = document.getElementById("Liste2");
var content = w.innerHTML;
content = lareponse;
w.disabled = false;
w.innerHTML = content;
//A voir >>>DOM(pour l'accès et modifications d'une page web en direct
//document.getElementById('Liste2').innerHTML = lareponse;
}
}
// Ici on va voir comment faire du post
//il faut verifier a koi correspond la valeur true.....
xhr.open("POST","valideLD2.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=utf-8");
// ne pas oublier de poster les arguments
xhr.send("Ld1="+Ld1Id);
}
Ensuite la page valideLD2.php : @header('Content-type:text/xml; charset=utf-8');
include ("connexionBDD.php");
$Ld1_retour =''; //id_département clé de la liste déroulante 1
if (isset($_POST['Ld1'])) {$Ld1_retour = $_POST['Ld1'];}
if ($Ld1_retour!='') {
$rq="Select ... FROM ... where ...=".$Ld1_retour.""; //Requete retournant les infos selon le chois de la premiere liste
$rq_pos_id=0;
$rq_pos_val=1;
$result= mysql_query ($rq) or die ("Select impossible");
$retour = '';
$retour .= '<option selected value="">< Choisissez ></option>';
if (mysql_num_rows($result) != 0) {
while ($row = mysql_fetch_row($result)) {
$retour .= '<option value="'. $row[$rq_pos_id] .'">'. htmlentities($row[$rq_pos_val]) .'</option>';
}
$retour .= '';
} else {
$retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled><option>< Cellule ></option></select>';
}
mysql_free_result($result);
mysql_close();
}else{
$retour = '<select style="width: 320" name="Liste2" id="Liste2" size="1" disabled><option>< Cellule ></option></select>';
}
echo $retour;
et enfin ton formulaire :
<tr>
<td>Liste 1 :</td>
<td>
<?php
include("valideLD1.php"); //Affichage de la liste déroulante 1
?>
</td>
</tr>
<tr>
<td>Liste 2 :</td>
<td>
<span id="niv2">
<select style="width: 320" name="Liste2" id="Liste2");" disabled="disabled"><!-- Liste deroulante, permettant de choisir les cellules selon le service -->
<option>< Choisissez ></option><!-- le premier element afficher dans la liste deroulante -->
</select>
</span> <!--Pour remplir la liste déroulante 2-->
</td>
</tr>
Voila si ca bug dit moi !!!!et surtout si tu compren pa un truc dde moi !!! [' Tu tr0uveras t0uj0urs plus f0rt que t0i '] |