menu déroulant dynamique et base de données [Fait]

**Heilong** · 02/02/2008, 12h31

Bonjour à tous,

Voilà je suis en train de modifier une interface pour rajouter des menu déroulants au contenu dynamique.

Il s'agit de gérer une liste de catégories, sous catégories, et pour chaque sous catégories une liste de termes définis.

Les informations viennent de la base de données, la liste des catégories dans un menu déroulant, la liste des sous catégories dans un menu déroulant, et les termes définis également dans un menu déroulant.

Je dois faire en sorte que la sélection d'une catégorie, affiche les sous catégories et les termes de cette sous catégorie.

Or actuellement tout s'affiche dans les 3 menu déroulants.

Une nomenclature est utilisé pour l'attribut value de chaque menu, par exemple catégorie 1 : CAT1, sous catégorie 1 : CAT1_SC1, terme définis de sous catégorie 1 : CAT1_SC1_TD1.

Si quelqu'un aurait une idée pour m'aider.

Merci

**SpaceFrog** · 02/02/2008, 19h41

as tu lu le tutoriel de siddh sur ajax ?

http://siddh.developpez.com/articles/ajax/

**carmi** · 05/08/2008, 09h48

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

<?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>";
?>

Tel Quel, le code fonctionne mais n'est pas très pratique.

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

$res = mysql_query("SELECT * FROM Bibliotheque GROUP BY NomAuteur");

Mais j'aimerai aussi pouvoir afficher tous les livre de l'auteur choisis dans mon second menu déroulant.

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

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

AjaxLivre.php

<?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>";
?>

Malheureusement cela ne fonctionne pas.

Sauriez vous pourquoi?

Cela fait maintenant quelques semaines que je buche dessus mais la je seche.

Merci pour votre comprehention.

Dari.

menu déroulant dynamique et base de données [Fait]

JavaScript

Discussions similaires

Partager

Partager