listes déroulantes liées

**ruyeken** · 12/08/2013, 15h35

Bonjour tout le monde !

J'ai déja poster un message sur le forum ajax et il s'avère que du coté ajax tout est bon mais mon problème n'est toujours pas résolu.

J'ai une liste déroulante (contenant le résultat d'une requête) qui fonctionne très bien.
J'ai une deuxième liste déroulante qui pour celle ci je souhaiterais qu'elle m'affiche le résultat d'une requête à partir du résultat de la première liste.

Je vous transmet mon code.
Une première page html.

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
<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){
						if (xhr.status == 200 || xhr.status == 0){
							leselect = xhr.responseText;
							// On se sert de innerHTML pour rajouter les options a la liste
							document.getElementById('class').innerHTML = leselect;
						}
						else {
							alert ("erreur :" + xhr.status+ " " + xhr.statusText);
						}
					}
				}			
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax2.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('department');
				idDepartment = sel.options[sel.selectedIndex].value;
				xhr.send("idDepartment="+idDepartment);
			}
		</script>
	</head>
	<body>
		<form>
			<fieldset style="width: 500px">
				<legend>Catagories search</legend>
				<label>Department</label>
				<select name='department' id='department' onchange='go()'>
					<option value='-1'>None</option>
					<?php					
						$sql1 = "select distinct(d_name) as D_NAME from dcs_v order by D_NAME";
						$db = new DB();
						$t = $db->select($sql1);
						$selected = '';
					   //$tuple->D_NAME = array();
						for ($i = 0; $i < count($t); $i++) {
							$tuple =  $t[$i];
							echo "\t",'<option value="', $tuple->D_NAME ,'"', $selected ,'>', $tuple->D_NAME ,'</option>',"\n";
							$selected='';
 
						}
					?>
				</select>
				<label>Classes</label>
				<div id='class' style='display:inline'>
				<select name='class'>
					<option value='-1'>Choose Class</option>
				</select>
				</div>
			</fieldset>
		</form>
	</body>
</html>

et une deuxieme nommée ajax2.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
<?php
 
	//echo $_POST["idDepartment"];
	//var_dump($_POST);
 
	echo "<select name='class'>";
	$var = "test";
	//if(isset($_POST["idDepartment"])){
		$sql1 = "select distinct(c_name) as C_NAME from dcs_v where d_name = '".$_POST["idDepartment"]."' order by D_NAME";
		$db = new DB();
		$t = $db->select($sql1);
		$selected = '';
	   //$tuple->D_NAME = array();
		for ($i = 0; $i < count($t); $i++) {
			$tuple =  $t[$i];
			echo "\t",'<option value="', $tuple->C_NAME ,'"', $selected ,'>', $tuple->C_NAME ,'</option>',"\n";
			//echo "\t",'<option value="', $var ,'"', $selected ,'>', $var ,'</option>',"\n";
			$selected='';		
		}
	//}
	echo "</select>";
 
?>

Mon problème est que ma deuxieme liste déroulante ne se remplis pas.
le

Code :

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

echo $_POST["idDepartment"];

fonctionne très bien et me renvoi bien ce que je veux.

Ma requête sql est bonne.

Je pense que le problème vient soit de ma condition soit de ma technique de remplissage de la liste.

Je suis sous oracle 11g.

J'espère que j'ai été clair et que vous pourrez m'aider.

Merci d'avance

**gototog** · 12/08/2013, 17h07

Code :

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

1
2
// On se sert de innerHTML pour rajouter les options a la liste
document.getElementById('class').innerHTML = leselect;

Tu renvoies un select pour mettre dans un select.

Donc enlève les balises select que renvoi ton code php appelé en ajax

Edit: ah oui, merci le nommage clair :')

Invité · 12/08/2013, 17h21

@gototog
Non, ça, c'est OK.
Ajax remplace le contenu du <div id='class'>.
Pas du <select name='class'>...

Soit dit en passant : BRAVO pour le nom de l'id et de la class !
"class" !!
Voilà encore une belle occasion pour de la confusion...

**ruyeken** · 12/08/2013, 17h21

je comprends pas pourquoi tu dis ca.. Effectivement j'aurais pu le faire comme ca

Code :

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

document.getElementById('class').innerHTML = xhr.responseText;

Mais la n'est pas mon souci enfin je pense.

C'est juste que ma deuxième liste ne se met pas à jour donc je pense que le problème viendrait plus de ma page php qui ne reconnaitrait pas ma deuxième liste dans le html ?

J'en sais rien du tout en fait c'est pour ca que j'espère que vous pourrez m'aider

Invité · 12/08/2013, 17h26

As-tu testé le fichier ajax2.php A PART,
en mettant une valeur numérique à la place de $_POST["idDepartment"] ?

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
<?php
	echo "<select name='class'>";
	$var = "test";
	//if(isset($_POST["idDepartment"])){
		$sql1 = "select distinct(c_name) as C_NAME from dcs_v where d_name = '62' order by D_NAME";
		$db = new DB();
		$t = $db->select($sql1);
		$selected = '';
	   //$tuple->D_NAME = array();
		for ($i = 0; $i < count($t); $i++) {
			$tuple =  $t[$i];
			echo "\t",'<option value="', $tuple->C_NAME ,'"', $selected ,'>', $tuple->C_NAME ,'</option>',"\n";
			//echo "\t",'<option value="', $var ,'"', $selected ,'>', $var ,'</option>',"\n";
			$selected='';		
		}
	//}
	echo "</select>";
?>

Au fait, à quelle moment INCLUS-tu les fichiers nécessaires ? (connexion,...)

**ruyeken** · 12/08/2013, 17h28

@jreaux62 Sinon je peux le changer si ca porte tant que ca à confusion..
Et au passage le faire pour Department puisque ça va déranger.

Mon problème viendrait de la ?

Invité · 12/08/2013, 17h29

Non.
ajax2.php est un fichier "indépendant".
Il doit contenir les include(...) utiles et nécessaires.

**ruyeken** · 12/08/2013, 17h37

Donc c'est la qu'était le problème..

J'utilise une méthode pour exécuter ma requête qui se trouve dans un fichier a part. Je n'avais pas inclus ce fichier (-_-')..

Maintenant ça marche très bien je te remercie beaucoup !!!!!!

listes déroulantes liées

Langage PHP

Discussions similaires

Partager

Partager