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