[DOM] Menus déroulants dynamiques par groupes

**carmi** · 05/08/2008, 19h18

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.

**Katachana** · 05/08/2008, 20h06

En fait il faudrait que, à la sélection de l'auteur tu exécutes une fonction javascript(AJAX) qui va ajouter les noms des livres dans le second SELECT.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<select name='livre' onclick="getLivres()">

Dans la page HTML ou PHP , inlcue cette ligne pour inclure la page .js contenant le code plus bas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<script type="text/javascript" src="./fonction.js"></script>

Tu crées une page (ici fonction.js) avec ce code (possible qu'il y ait des erreurs):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<?php
 
?>
<SCRIPT LANGUAGE="JavaScript">
 
function getXhrTrap(){
	if(window.XMLHttpRequest) // Firefox et autres
	   var xhrT = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                var xhrT = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                var xhrT = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non support2 par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   var xhrT = false;
	}
	return xhrT;
}
 
function getLivres() {
 
//Passe le nom de l'auteur en parametre de l'url
var arg = 'ICI_URL_DE_LA_PAGE&nomAuteur='+nomAuteur;
 
 
	var xhrT = getXhrTrap();
 
	xhrT.open("POST","./PAGEREQUETE.PHP",true);
	xhrT.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhrT.send(arg);
 
	// On defini ce qu'on va faire quand on aura la reponse
	xhrT.onreadystatechange = function()
	{	
		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
		if(xhrT && xhrT.readyState == 4 && xhrT.status == 200 && xhrT.responseXML)
		{
			reponseT = xhrT.responseXML.documentElement;
			var livres = reponseT.getElementsByTagName("livres");
//la tu recuperes le select dans lequel tu veux ajouter des elements
var selbox = document.getElementById("NOMDUSELECTDELIVRE");
 
 
				for (var i = 0 ; i < livres.length ; i++) {
					var srv = livres[i];
					var nomLivres = srv.getElementsByTagName("nomAuteur")[0].firstChild.nodeValue;
 
//La tu ajoutes les livres dans le SELECT
new_elem = new Option(name,i);
				selbox.options[selbox.length] = new_elem;
				}
		}
	}
	}
}
</SCRIPT>

Ensuite la page php (correspond a PAGEREQUETE.PHP) qui executeras la requete et créera ton fichier xml dans le DOM.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$buffer  = '<?xml version="1.0"?>';
	$buffer .= '<liste>';
mysql_connect("localhost","XXXXX","XXXXXX");
mysql_select_db("test");
$res = mysql_query("SELECT livre FROM Bibliotheque WHERE nomAuteur ="'.$nomAuteur.'" ");
while($row = mysql_fetch_assoc($res)){
$buffer .='<nomAuteur>'.$row['livre'].'</nomAuteur>';
}
$buffer .='</liste>';

Bonne chance pour la mise en place

**carmi** · 06/08/2008, 00h19

J'ai essayé mais visiblement soit il ne prend pas la valeur post soit la liste ne se rempli pas.

Cela dit, je n'ai pas très bien compris votre code. dois je le fusionner avec le mien? dois je garder ma fonction go sur ma première liste (auteurs)?

pourquoi un appel de fonction onclick sur ma seconde liste?

je suis un peu perdu pourtant je sent que j'y suis presque, c'est assez frustrant je dois l'avouer.

merci pour votre aide

Edit : Dans mon premier code de mon premier poste on dirait qu'il ne prend pas en compte le fait que le value de ma liste d'auteur devienne du texte (Auteur) au lieu d'un nombre (Code)

**Bovino** · 06/08/2008, 08h11

Les éléments de formulaires insérés avec innerHTML ne sont pas pris en compte dans le submit du formulaire, il est préférable d'utiliser les méthodes du DOM (createElement, appendChild, insertBefore...)

**Katachana** · 06/08/2008, 09h10

Il faut que tu laisse la fonction qui remplis ton premier select, tu peux enlever tous le reste.

Et puis le OnClick , tu as raison , il faut le mettre sur le premier Select (auteur). Et puis met plutot onChange que OnClick et ca devrait marcher.

**carmi** · 06/08/2008, 19h57

Je reprend donc les lignes de codes que j'ai actuellement.

J'ai modifiés les noms pour plus de clarté.

j'ai donc une table "bibliotheque" dans une base de donnée "test" (type Mysql).

cette table est formée ainsi :

"Code" -- "NomsAuteurs" -- "NomsLivres"
---------------------------------------
1 - - - - - - Mr. XXX - - - - - AAAAA - -
2 - - - - - - Mr. XXX - - - - - BBBBB - -
3 - - - - - - Mr. YYY - - - - - CCCCC - -
4 - - - - - - Mr. YYY - - - - - DDDDD - -
5 - - - - - - Mr. ZZZ - - - - - EEEEE - -

j'ai donc un premier menu déroulant avec le nom des auteurs.
(ayant plusieurs mêmes auteurs dans ma table je les ai classé en groupe ce qui me donne chaque noms d'auteurs dans ma première liste.)

le "value" du select de ma première liste est le nom de l'auteur à savoir :
<option value='".$row["NomsAuteurs"]."'>

Je cherche donc à avoir un second menu déroulant comprenant la liste des livres correspondant au choix de l'auteur, fait par mon premier menu déroulant
(bien sur sans bouton de validation ce qui évidemment, a déjà été compris)

ci dessous mes codes :

pagechoixauteurs.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
	<head>
		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
		<script type="text/javascript" src="./fonction.js"></script>
 
	</head>
	<body>
	<script type="text/javascript" src="./fonction.js"></script>
		<form>
			<fieldset style="width: 500px">
				<legend>Liste liées</legend>
				<label>Auteurs</label>
				<select name='auteur' id='auteur' onchange='getLivres' >
					<option value='-1' >Aucun</option>
					<?
						mysql_connect("localhost","XXXXXX","XXXXXX");
						mysql_select_db("test");
						$res = mysql_query("SELECT * FROM bibliotheque GROUP BY NomsAuteurs");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["NomsAuteurs"]."'>".$row["NomsAuteurs"]."</option>";
						}
					?>
				</select>
				<label>Livres</label>
				<div id='livre' style='display:inline'>
				<select name='livre' >
					<option value='-1'>Choisir un livre</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

fonction.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
function getXhrTrap(){
	if(window.XMLHttpRequest) // Firefox et autres
	   var xhrT = new XMLHttpRequest();
	else if(window.ActiveXObject){ // Internet Explorer
	   try {
                var xhrT = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                var xhrT = new ActiveXObject("Microsoft.XMLHTTP");
            }
	}
	else { // XMLHttpRequest non supporte par le navigateur
	   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
	   var xhrT = false;
	}
	return xhrT;
}
 
function getLivres() {
 
//Passe le nom de l'auteur en paramètre de l'url
var arg = 'http://localhost/XXXXX/pagechoixauteurs.php&NomsAuteurs='+NomsAuteurs;
 
 
	var xhrT = getXhrTrap();
 
	xhrT.open("POST","ajaxLivre.php",true);
	xhrT.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	xhrT.send(arg);
 
	// On defini ce qu'on va faire quand on aura la reponse
	xhrT.onreadystatechange = function()
	{	
		// On ne fait quelque chose que si on a tout recu et que le serveur est ok
		if(xhrT && xhrT.readyState == 4 && xhrT.status == 200 && xhrT.responseXML)
		{
			reponseT = xhrT.responseXML.documentElement;
			var livres = reponseT.getElementsByTagName("NomsLivres");
//la tu recuperes le select dans lequel tu veux ajouter des elements
var selbox = document.getElementById("livre");
 
 
				for (var i = 0 ; i < livres.length ; i++) {
					var srv = livres[i];
					var nomLivres = srv.getElementsByTagName("NomsLivres")[0].firstChild.nodeValue;
 
//La tu ajoutes les livres dans le SELECT
new_elem = new Option(name,i);
				selbox.options[selbox.length] = new_elem;
				}
		}
	}
	}
}

ajaxLivre.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php
 
$buffer  = '<?xml version="1.0"?>';
        $buffer .= '<liste>';
 
mysql_connect("localhost","XXXX","XXXXXX");
mysql_select_db("test");
$res = mysql_query("SELECT NomsLivres FROM bibliotheque WHERE NomsAuteurs = '".$NomsAuteurs."' ");
 
while($row = mysql_fetch_assoc($res)){
$buffer .='<NomsAuteurs>'.$row['NomsLivres'].'</NomsAuteurs>';
}
$buffer .='</liste>';
 
?>

Voila.

Je ne trouve pas ce qui ne va pas.
Si quelqu'un pourait m'eguiller ce serait super!

Merci a vous
dari

[DOM] Menus déroulants dynamiques par groupes

JavaScript

Vue hybride

Discussions similaires

Partager

Partager