Discussion :

[Sergio_zero]

Bonjour à tous.
J'ai suivi le tuto et les scripts postés sur le forum pour faire mes 4 listes liées mais cependant j'ai un problème.
La seconde liste est fonctionne, elle m'affiche bien les résultats selon ce qu'il y a séléctionné dans la première liste mais pour la troisème et la quatrième rien ne se passe.
Pouvez vous m'aider à résoudre ce problème ?
Voici le script de la page cartouche_generique.php
dans le head /

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
/* Initialisation XMLHttpRequest */
				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;
				};
 
				function changeLesListes(num){
					var num; // numero de la liste a partir de laquelle on va faire les changements
					var div1 = document.getElementById('ididliste1');
					var div2 = document.getElementById('ididliste2');
					var div3 = document.getElementById('ididliste3');
					var val1 = div1.options[div1.selectedIndex].value;
					var val2 = div2.options[div2.selectedIndex].value;
					var val3 = div3.options[div3.selectedIndex].value;
					// SI la liste 1 a changé
					if(num==1) { 
						changeListFromList(val1,0,0,2,'iddivListe2'); // liste 2 -> on modifie
						changeListFromList(val1,0,0,3,'iddivListe3'); // liste 3 -> defaut
						changeListFromList(val1,0,0,4,'iddivListe4'); // liste 4 -> defaut
					// SI la liste 2 a changé
					} else if(num==2) {
						changeListFromList(val1,val2,0,3,'iddivListe3'); // liste 3 -> on modifie
						changeListFromList(val1,val2,0,4,'iddivListe4'); // liste 4 ->defaut
					// SI la liste 3 a changé
					} else if(num==3) {
						changeListFromList(val1,val2,val3,4,'iddivListe4'); // liste 4 -> on modifie
					}
				};
 
				/* Changer la liste n+1 après choix dans la liste n */
				function changeListFromList(val1,val2,val3,numliste,iddiv){
					var val1; // valeur de l option choisie (liste 1)
					var val2; // valeur de l option choisie (liste 2)
					var val3; // valeur de l option choisie (liste 3)
					var numliste; // numero de la liste A MODIFIER 
					// -> pour le nom de fichier a utiliser : listeslieesAjax-liste2.php, listeslieesAjax-liste3.php ou listeslieesAjax-liste4.php
					var iddiv; // id du div qu'on remplira
 
					var xhr = getXhr();
					xhr.onreadystatechange = function(){
						// si on a tout reçu et que le serveur est ok
						if(xhr.readyState == 4 && xhr.status == 200)
						{
							texthtml = xhr.responseText;
							// On se sert de innerHTML pour rajouter les options a la liste des "selections"
							document.getElementById(iddiv).innerHTML = texthtml;
						}
					}
					// on defini la methode (post) + le fichier de traitement + asynchrone (true)
					xhr.open("POST","<?php echo ROOTPATH; ?>/insert/listeslieesAjax-liste"+numliste+".php",true);
					xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
					// on poste les parametres a transmettre au fichier qui fera le traitement
					xhr.send("val1="+val1+"&val2="+val2+"&val3="+val3);
				};

Code php :

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
<form method="post" action="">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Types : </label>
			<select id="ididliste1" name="idliste1" onchange="changeLesListes(1);">
            <option value="0">-- Type --</option>
            <?php	connexionbdd();					
			$query = mysql_query("SELECT * FROM type_generique ORDER BY type");
			while ($back = mysql_fetch_assoc($query))
				{
					echo '<option value="'.$back["id"].'">'.$back["type"].'</option>';
				}?>
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
			</select>	
		</p>
		<p>
			<label>Marques : </label>
			<span id="iddivListe2"><!-- par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2" >
				<option value="0">(Choisissez avant dans la liste 1)</option>
			</select>
			</span>	
		</p>
		<p>
			<label>Gammes : </label>
			<span id="iddivListe3"><!-- par innerHTML AJAX va ecrire la liste 3 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste3" name="idliste3">
				<option value="0">(Choisissez avant dans la liste 2)</option>
			</select>
			</span>	
		</p>
		<p>
			<label>Imprimantes : </label>
			<span id="iddivListe4"><!-- par innerHTML AJAX va ecrire la liste 4 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste4" name="idliste4">
				<option value="0">(Choisissez avant dans la liste 3)</option>
			</select>
			</span>	
		</p>
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>

Les pages ajax qui sont chargées lors de la séléction dans une des listes
listeslieesAjax-liste2, listeslieesAjax-liste3 et listeslieesAjax-liste4

Code php :

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
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['val1']) && is_numeric($_POST['val1']) && $_POST['val1']!=0)
	{
		// recuperation de id_liste1
		$id_liste1_selected = intval($_POST['val1']);
		mysql_connect("***","***","***");
		mysql_select_db("***");
		$query = mysql_query("SELECT * FROM marques_generique WHERE id_cor_type=" . mysql_real_escape_string($id_liste1_selected) . " ORDER BY marque");?>
		<select id="ididliste2" name="idliste2" onchange="changeLesListes(2);">
		<?php
		while ($back = mysql_fetch_assoc($query))
			{
				echo '<option value="'.$back["id_marque"].'">'.$back["marque"].'</option>';
			}
		echo'</select>';
	}
?>
listeslieesAjax-liste3
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
// Ajax : Changer la liste 3 après choix dans la liste 2
if(isset($_POST['val2']) && is_numeric($_POST['val2']) && $_POST['val2']!=0)
	{
		// recuperation de id_liste1
		$id_liste2_selected = intval($_POST['val2']);
		mysql_connect("***","***","***");
		mysql_select_db("***");
		$query1 = mysql_query("SELECT * FROM gammes_generique 
		WHERE id_cor_marque=".mysql_real_escape_string($id_liste2_selected)." ORDER BY GAMME");
		?>
		<select id="ididliste3" name="idliste3" onchange="changeLesListes(3);">
		<?php
		while ($back1 = mysql_fetch_assoc($query1))
			{
				echo '<option value="'.$back1["id_gamme"].'">'.$back1["GAMME"].'</option>';
			}
		echo'</select>';
	}
?>
listeslieesAjax-liste4
<?php
header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";
// Ajax : Changer la liste 3 après choix dans la liste 2
if(isset($_POST['val3']) && is_numeric($_POST['val3']) && $_POST['val3']!=0)
{
	// recuperation de id_liste1
	$id_liste3_selected = intval($_POST['val3']);
		mysql_connect("***","***","***");
		mysql_select_db("***");
		$query = mysql_query("SELECT * FROM cartouche_generique WHERE id_cor_gamme=" . mysql_real_escape_string($id_liste3_selected) . " ORDER BY POUR_IMPRIMANTE");
		echo'<select id="ididliste4" name="idliste4" onchange="changeLesListes(4);">';
		while ($back = mysql_fetch_assoc($query))
			{
				echo '<option value="'.$back["id"].'">'.$back["POUR_IMPRIMANTE"].'</option>';
			}
		echo'</select>';
	}
?>

Merci beaucoup de votre aides.