[DOM] Menus déroulants dynamiques par groupes
Bonjour à vous!
Je me suis basé sur le tuto d'ajax ICI MEME pour faire deux menus déroulant et dynamique.
Je vous explique rapidement :
Au lieu d'avoir deux tables (Livre, et Auteurs) je n'en ai qu'une : Bibliotheque
Elle est composé des champs suivants :
Code - NomAuteur - Livre
------------------
1 - Mr A. - AAA
2 - Mr A. - BBB
3 - Mr A. - CCC
4 - Mr A. - DDD
5 - Mr B. - EEE
6 - Mr B. - FFF
7 - Mr B. - GGG
8 - Mr C. - HHH
Voici mes codes source :
auteurs.php
<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript'>
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...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
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){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('auteur');
code = sel.options[sel.selectedIndex].value;
xhr.send("Code="+code);
}
</script>
</head>
<body>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Auteurs</label>
<select name='auteur' id='auteur' onchange='go()'>
<option value='-1' >Aucun</option>
<?
mysql_connect("localhost","XXXXX","XXXXXX");
mysql_select_db("test");
$res = mysql_query("SELECT * FROM Bibliotheque");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["Code"]."'>".$row["NomAuteur"]."</option>";
}
?>
</select>
<label>Livres</label>
<div id='livre' style='display:inline'>
<select name='livre'>
<option value='-1'>Choisir un auteur</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>
AjaxLivre.php
Tel Quel, le code fonctionne mais n'est pas très pratique.<?php
echo "<select name='livre'>";
if(isset($_POST["Code"])){
mysql_connect("localhost","XXXXXX","XXXXXXXX");
mysql_select_db("test");
$res = mysql_query("SELECT Livre FROM Bibliotheque
WHERE Code=".$_POST["Code"]."") or die('Erreur SQL !<br>'.$res.'<br>'.mysql_error());
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["Code"]."'>".$row["Livre"]."</option>";
}
}
echo "</select>";
?>
En effet, dans le premier menu j'ai plusieurs fois le même auteur et les livres sont bien associés.
Mon soucie est le suivant.
J'aimerais regrouper les auteurs dans mon premier menu.
Pour cela je vais utiliser l'option GROUP BY dans mon sql
dans auteurs.php
Mais j'aimerai aussi pouvoir afficher tous les livre de l'auteur choisis dans mon second menu déroulant.$res = mysql_query("SELECT * FROM Bibliotheque GROUP BY NomAuteur");
ex: Choisir Mr.B et voir dans mon second menu EEE - FFF - et GGG
j'ai pensé donc remplacer la valeur de ma liste d'auteur.
A la place d'être indexé par le "Code", je pense qu'il est préférable de le référencer par le "NomAuteur"
j'ai donc fait ces modifs très simples :
auteurs.php
AjaxLivre.php<html>
<head>
<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
<script type='text/javascript'>
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...");
xhr = false;
}
return xhr;
}
/**
* Méthode qui sera appelée sur le click du bouton
*/
function go(){
var xhr = getXhr();
// On défini ce qu'on va faire quand on aura la réponse
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){
leselect = xhr.responseText;
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('livre').innerHTML = leselect;
}
}
// Ici on va voir comment faire du post
xhr.open("POST","ajaxLivre.php",true);
// ne pas oublier ça pour le post
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
// ne pas oublier de poster les arguments
// ici, l'id de l'auteur
sel = document.getElementById('auteur');
nomauteur = sel.options[sel.selectedIndex].value;
xhr.send("NomAuteur="+nomauteur);
}
</script>
</head>
<body>
<form>
<fieldset style="width: 500px">
<legend>Liste liées</legend>
<label>Auteurs</label>
<select name='auteur' id='auteur' onchange='go()'>
<option value='-1' >Aucun</option>
<?
mysql_connect("localhost","XXXXX","XXXXXX");
mysql_select_db("test");
$res = mysql_query("SELECT * FROM Bibliotheque");
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["NomAuteur"]."'>".$row["NomAuteur"]."</option>";
}
?>
</select>
<label>Livres</label>
<div id='livre' style='display:inline'>
<select name='livre'>
<option value='-1'>Choisir un auteur</option>
</select>
</div>
</fieldset>
</form>
</body>
</html>
Malheureusement cela ne fonctionne pas.<?php
echo "<select name='livre'>";
if(isset($_POST["NomAuteur"])){
mysql_connect("localhost","XXXXXX","XXXXXX");
mysql_select_db("test");
$res = mysql_query("SELECT Livre FROM Bibliotheque
WHERE NomAuteur=".$_POST["NomAuteur"]." ORDER BY Livre") or die('Erreur SQL !<br>'.$res.'<br>'.mysql_error());
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["Code"]."'>".$row["Livre"]."</option>";
}
}
echo "</select>";
?>
Sauriez vous pourquoi?
Cela fait maintenant quelques semaines que je buche dessus mais la je seche.
Merci pour votre comprehention.
Dari.
Répondre avec citation
Partager