[AJAX] liaison de listes déroulantes

**developpeuse20** · 03/03/2009, 14h40

Bonjour

je suis contente de vous paratager mon probleme,j'ai une liste deroulante liee
tables (Fournisseur + Produits) ca marche pas

vous pouvez m'aider a trouver la solution

un grand merci

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<html>
<head>
<title>Listes Liees +four+prod</title>
<script type='text/javascript'>
 
function getXhr(){
                                var xhr = null;
if(window.XMLHttpRequest)// Firefox et autres
   xhr = new XMLHttpRequest();
elseif(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('prod').innerHTML = leselect;
}
}
 
// Ici on va voir comment faire du post
xhr.open("POST","prod.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 four
sel = document.getElementById('four');
idfour = sel.options[sel.selectedIndex].value;
xhr.send("idfour="+idfour);
 
}
</script>
</head>
<body>
<style>
<!--
td{font-family:verdana,sans-serif; font-size:8pt;color:#333333};
body{font-family:verdana,sans-serif; font-size:11pt;color:#333333;font-weight:bold};
//-->
</style>
 
</head>
<body bgcolor="#eeeedd">
<center>
<p>quel produits et quelle clientes voulez vous choisir?</p>
 
<form>
<tr><td>
<label>Fournisseurs :</label>
<td>
<?
mysql_connect("localhost","root","");
                        mysql_select_db("Command");
$res = mysql_query("SELECT * FROM fournisseur ORDER BY nomfour");
echo "><select name=\'four\' id=\'four\' onchange=\'go()\'>
<option value=\'-1\'>Aucun</option>
                     </tr>";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["idfour"]."'>".$row["nomfour"]."</option>";
}
ech "</select>";
?>
 
<br>
<br>
<tr><td>
<label>Produits :</label>
<td><div id='prod' style='display:inline'>
<select name='prod'>
<option value='-1'>Choisir un produit</option>
</tr>
</select>
<br>
<p>
                    <tr><td>
<label>Localisation :</label>
<td>
 
<?
mysql_connect("localhost","root","");
                        mysql_select_db("Command");
$res = mysql_query("SELECT Distinct Localisation FROM client ");
  echo"<select name=\"Nom\" id=\"client\">";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["Localisation"]."'>".$row["Localisation"]."</option>";
}
echo "</select> ";
?>
</tr>
 
<br>
<p>
                    <tr><td>
<label>Localisation :</label>
<td>
 
<?
mysql_connect("localhost","root","");
                        mysql_select_db("Command");
$res = mysql_query("SELECT Distinct SortClt FROM client ");
     echo"<select name=\"Nom\" id=\"client\">";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["SortClt"]."'>".$row["SortClt"]."</option>";
}
echo "</select> ";
?>
</tr>
</select>
</div>
</form>
</body>
</html>

prod.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
<?php
$host = 'localhost';
$user = 'root';
$pass = '';
$base="Command";
 
?>
 
<?
 
	echo "<select name='prod'>";
	if(isset($_POST["idfour"])){
	$idfour = $_POST["idfour"];
		mysql_connect("localhost","root","");	
        mysql_select_db("Command");
		$res = mysql_query("SELECT * FROM produit WHERE idfour = '".$idfour."' ORDER BY idprod");
	while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["idprod"]."'>".$row["titreprod"]."</option>";
		}
	}
	echo "</select>"; 
?>

**E.Bzz** · 03/03/2009, 14h44

Bonjour,

Envoyé par developpeuse20

j'ai une liste deroulante liee

Avec une seule, pas étonnant

Envoyé par developpeuse20

ca marche pas

vous pouvez m'aider a trouver la solution

Dès que tu nous auras expliqué ce qui ne marche pas, quelles sont les erreurs retournées s'il y en a, et le passage du code concerné, certainement ....

A+

**developpeuse20** · 03/03/2009, 15h00

Merci Bcp d'avoir me repondre assez vite trop sympa

y a pas des erreurs retournées le probleme que lorsque le clique sur la liste des fournisseurs pour obtenir les produits qui appartients a ce fournisseur
la liste de poduits n'affichent pas les produits de ce founrnisseur (selectionne vide)

**E.Bzz** · 03/03/2009, 15h18

Il faut déjà que tu mettes de l'ordre dans la structure de ta table (en rouge)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<tr><td>
<label>Produits :</label>
<td><div id='prod' style='display:inline'>
<select name='prod'>
<option value='-1'>Choisir un produit</option>
</tr>
</select>
<br>
<p>
                    <tr><td>
<label>Localisation :</label>
<td>

Tout ton div et son contenu doivent être dans un même <td>. Tu ne dois jamais rien mettre entre </tr> et <tr> (ni entre </td><td> ou <tr><td>) : toujours uniquement entre <td> et </td>

De plus, dans un form, tu ne peux pas utiliser innerHTML pour mettre à jour ta page. Il faut utiliser les syntaxes DOM ...

A+

**developpeuse20** · 03/03/2009, 15h49

cool j'ai resolu le probleme merci bcp

il reste un simple travail c'est que selectionne ne sont pas placees

il pourrait un grand merci si vous continuez a m'aider pour que l'affichage soit professionel

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
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
 
<html>
	<head>
		<title>Listes Liees +Module+Matiere</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('prod').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","prod.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 Module
				sel = document.getElementById('four');
				idfour = sel.options[sel.selectedIndex].value;
				xhr.send("idfour="+idfour);
 
			}
		</script>
	</head>
	<body>
	<style>
<!--
td{font-family:verdana,sans-serif; font-size:8pt;color:#333333};
body{font-family:verdana,sans-serif; font-size:11pt;color:#333333;font-weight:bold};
//-->
</style>
 
</head>
 
<body bgcolor="#eeeedd">
<center>
<p>quel produits et quelle clientes voulez vous choisir?</p>
 
		<form>
				<tr><td>
				<label>Fournisseur :</label>
				<td><select name='four' id='four' onchange='go()'>
					<option value='-1'>Aucun</option>
                     </tr>
					<?
						mysql_connect("localhost","root","");	
                        mysql_select_db("Command");
						$res = mysql_query("SELECT * FROM fournisseur ORDER BY nomfour");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["idfour"]."'>".$row["nomfour"]."</option>";
						}
					?>
 
				</select>
				<br>
				<br>
				<tr><td>
				<label>Produits :</label>
				<td><div id='prod' style='display:inline'>
				<select name='prod'>
					<option value='-1'>Choisir un produit</option>
					</tr>
				</select>
				</div>
				<br>
           <p>
<label>Localisation :</label>
<td>
<?
mysql_connect("localhost","root","");
  mysql_select_db("Command");
$res = mysql_query("SELECT Distinct Localisation FROM client ");
  echo"<select name=\"Nom\" id=\"client\">";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["Localisation"]."'>".$row["Localisation"]."</option>";
}
echo "</select> ";
?>
</tr>
<br>
<p>
<label>Clients :</label>
<td>
<?
mysql_connect("localhost","root","");
 mysql_select_db("Command");
$res = mysql_query("SELECT Distinct SortClt FROM client ");
     echo"<select name=\"Nom\" id=\"client\">";
while($row = mysql_fetch_assoc($res)){
echo "<option value='".$row["SortClt"]."'>".$row["SortClt"]."</option>";
}
echo "</select> ";
?>	
<p><input type="submit" value="Afficher"></p>
 
		</form>
	</body>
</html>

**E.Bzz** · 03/03/2009, 15h54

Envoyé par developpeuse20

il reste un simple travail c'est que selectionne ne sont pas placees

il pourrait un grand merci si vous continuez a m'aider pour que l'affichage soit professionel

Et en remettant les mots dans l'ordre, ça donne quoi ?

A+

**developpeuse20** · 03/03/2009, 16h16

je dirai qu'il y a un desordre entre les selectionne (listes deroulante ) la fourmualire n'est pas bien ordonné il y la piece jointe qui montre clairement
les positions des selectionnes

**E.Bzz** · 03/03/2009, 16h20

N'utilise pas de <table> pour faire ta mise en page.
D'ailleurs tu l'as oublié, la balise <table>

Pas étonnant que le nav s'y perde.

Regarde plutôt côté CSS

A+

**hokidoki** · 03/03/2009, 16h24

Envoyé par developpeuse20

je dirai qu'il y a un desordre entre les selectionne (listes deroulante ) la fourmualire n'est pas bien ordonné il y la piece jointe qui montre clairement
les positions des selectionnes

Bonjour,
sincèrement même en relisant plusieurs fois ta phrase, je n'arrive pas bien a te comprendre, il serait judicieux d'utiliser de la ponctuation peu être ?

Tu devrais illustrer tes propos par un exemple, c'est à dire le libéllé Client correspond a la mauvaise liste deroulante? (On parle de libellés et de liste déroulante, le terme 'selectionne' dans ta phrase je ne le comprend pas...)

En terme de professionnalisme je te conseille une chose :
Aligne tout tes listes déroulante puis aligne les libéllés sur la droite...
Exemple :

Code :

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

1
2
3
4
 
    Nom : [Liste déroulante]
 Prénom : [Liste déroulante]
   Toto : [Liste déroulante]

(L'alignement n'est pas parfait je n'arrive pas sur cet éditeur mais ça devrait suffire pour comprendre

)
Je ne sais pas vraiment si c'était sur l'ergonomie que tu posais ta question mais ça sera toujours mieux de faire comme ça.

**developpeuse20** · 03/03/2009, 16h25

merci bcp
c'est gentil de ta part

[AJAX] liaison de listes déroulantes

JavaScript

Discussions similaires

Partager

Partager