[AJAX] 4 listes liées

Version imprimable

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:

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:

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:

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.

16/01/2012, 09h09
andry.aime

Bonjour,

1-

Citation:

function changeLesListes(num){
var num;

num est toujours null donc ça ne passe sur aucun test if.

2-

Citation:

header("Content-Type: text/xml");
echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>";

Vire les de ton code php.

A+.
16/01/2012, 18h28
Sergio_zero

Bonjour andry.aime et merci de ton aide.
J'ai enlevé les header sur mes pages php par contre je n'ai pas compri se que tu veux dire à propos de la variable num.
Que dois je faire ?
16/01/2012, 18h35
Bovino

Code:

var num;

Là, tu déclares une variable num, qui par défaut vaut undefined.
Mais du coup, cette déclaration écrase le paramètre passé à la fonction

Code:

function changeLesListes(num){...}

Citation:

Que dois je faire ?

Peut-être apprendre les bases ? :aie:
16/01/2012, 19h21
Sergio_zero

Merci pour ta réponse, ça m'aide beaucoup.
J'ai lu des tas de tuto et de code sur les forums et ils sont tous différent, j'y perd mon latin.

Salut,

Je me suis penché sur ton problème et je t'ai repris intégralement ton code parce qu'un bon exemple vaut mieux qu'un (trop) long discours dans ton cas :

Fichier : cartouche_generique.php

Code:

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
<?php
connexionbdd();
$exec = mysql_query("SELECT id, type FROM type_generique ORDER BY type") or die(mysql_error());
?>
<form method="post" action="">
   <fieldset style="width:550px;">
      <legend>Listes liées</legend>
      <p>
         <label for="types">Types : </label>
         <select id="types" name="type" onchange="refreshMarques();">
            <option value="0">-- Type --</option>
            <?php while($data = mysql_fetch_assoc($exec)): ?>
               <option value="<?php echo $data['id']; ?>"><?php echo $data['type']; ?></option>
            <?php endwhile; ?>
         </select>
      </p>
      <p>
         <label for="marques">Marques : </label>
         <select id="marques" name="marque" onchange="refreshGammes();">
            <option value="0">(Choisissez un type)</option>
         </select>
      </p>
      <p>
         <label for="gammes">Gammes : </label>
         <select id="gammes" name="gamme" onchange="refreshImprimantes();">
            <option value="0">(Choisissez une marque)</option>
         </select>
      </p>
      <p>
         <label for="imprimantes">Imprimantes : </label>
         <select id="imprimantes" name="imprimante">
            <option value="0">(Choisissez une gamme)</option>
         </select>
      </p>
      <p>
         <input type="submit" name="btenvoi" value="OK" />
      </p>
   </fieldset>
</form>

Voici le code js qui gère les appels ajax et la mise à jour des données :

Code:

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
/* 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 refreshMarques() {
   var listTypes = document.getElementById('types');
   var idType = listTypes.options[listTypes.selectedIndex].value;
   if (idType > 0) {
      callAndRefresh('marques', '/insert/refreshMarques.php', 'type='+idType);
   }
}
 
function refreshGammes() {
   var listMarques = document.getElementById('marques');
   var idMarque = listMarques.options[listMarques.selectedIndex].value;
   if (idMarque > 0) {
      callAndRefresh('gammes', '/insert/refreshGammes.php', 'marque='+idMarque);
   }
}
 
function refreshImprimantes() {
   var listGammes = document.getElementById('gammes');
   var idGamme = listGammes.options[listGammes.selectedIndex].value;
   if (idGamme > 0) {
      callAndRefresh('imprimantes', '/insert/refreshIprimantes.php', 'gamme='+idGamme);
   }
}
 
function callAndRefresh(id, url, params) {
   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)
      {
         // On se sert de innerHTML pour rajouter les options a la liste des "selections"
         document.getElementById(id).innerHTML = xhr.responseText;
      }
   }
   // on defini la methode (post) + le fichier de traitement + asynchrone (true)
   xhr.open("POST", url , true);
   xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
   // on poste les parametres a transmettre au fichier qui fera le traitement
   xhr.send(params);
}

Enfin, voici les 3 fichiers appelés par les requêtes ajax qui renvoient les données correspondantes aux sélections dans les listes :
/insert/refreshMarques.php

Code:

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
<?php
 
$response = array();
 
// Ajax : Liste des marques après sélection d'un type
if (isset($_POST['type']) && ctype_digit($_POST['type']) && $_POST['type'] > 0) {
   $idType = (int) $_POST['type'];
   connexionbdd();
   $sql  = "SELECT id_marque, marque FROM marques_generique WHERE id_cor_type = $idType ORDER BY marque"; // ici on est sûr d'avoir un entier
   $exec = mysql_query($sql);
 
   if ( ! $exec) {
      $response[] = '<option value="0">Erreur</option>';
   }
   else {
      while($row = mysql_fetch_assoc($exec)) {
         $response[] = '<option value="'.$row['id_marque'].'">'.$row['marque'].'</option>';
      }
   }
}
else {
   $response[] = '<option value="0">(Choisissez un type)</option>';
}
header("Content-Type: text/html");
echo implode("\n", $response);
 
?>

/insert/refreshGammes.php

Code:

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
<?php
 
$response = array();
 
// Ajax : Liste des gammes après sélection d'une marque
if (isset($_POST['marque']) && ctype_digit($_POST['marque']) && $_POST['marque'] > 0) {
   $idMarque = (int) $_POST['marque'];
   connexionbdd();
   $sql  = "SELECT id_gamme, gamme FROM gammes_generique WHERE id_cor_marque = $idMarque ORDER BY gamme"; // ici on est sûr d'avoir un entier
   $exec = mysql_query($sql);
 
   if ( ! $exec) {
      $response[] = '<option value="0">Erreur</option>';
   }
   else {
      while($row = mysql_fetch_assoc($exec)) {
         $response[] = '<option value="'.$row['id_gamme'].'">'.$row['gamme'].'</option>';
      }
   }
}
else {
   $response[] = '<option value="0">(Choisissez une marque)</option>';
}
header("Content-Type: text/html");
echo implode("\n", $response);
 
?>

/insert/refreshImprimantes.php

Code:

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
<?php
 
$response = array();
 
// Ajax : Liste des imprimantes après sélection d'une gamme
if (isset($_POST['gamme']) && ctype_digit($_POST['gamme']) && $_POST['gamme'] > 0) {
   $idGamme = (int) $_POST['gamme'];
   connexionbdd();
   $sql  = "SELECT id, pour_imprimante FROM cartouche_generique WHERE id_cor_gamme = $idGamme ORDER BY gamme"; // ici on est sûr d'avoir un entier
   $exec = mysql_query($sql);
 
   if ( ! $exec) {
      $response[] = '<option value="0">Erreur</option>';
   }
   else {
      while($row = mysql_fetch_assoc($exec)) {
         $response[] = '<option value="'.$row['id'].'">'.$row['pour_imprimante'].'</option>';
      }
   }
}
else {
   $response[] = '<option value="0">(Choisissez une gamme)</option>';
}
header("Content-Type: text/html");
echo implode("\n", $response);
 
?>

Tu verras, je t'ai tout séparé. Le code est sacrément factorisable mais j'ai préféré garder cette approche pour que tu vois bien comment cela se passe.
Comme toujours ça sort du four, je n'ai rien testé et du coup je croise les doigts.
Allez bon dépieutage. :ccool:

18/01/2012, 19h33
Sergio_zero

Merci beaucoup.
Je vais faire un copier coller et tester tous ça.
J'édit des que c'est testé.
Encore merci d'avoir pris du temps pour moi.
Que signifie ctype_digit ?
EDIT : C'est bon, après quelque modif au niveau de la requet ça a l'air de fonctionner.
Pour l'instant je n'ai modifié que pour la marque mais je vais faire les autre ce soir.
Merci.
20/01/2012, 07h45
Sergio_zero

Merci rawsrc après quelque modifications des requêtes ça fonctionne.
Encore une question, que dois-je modifier dans le js pour que ça fonctionne sur un mot plutôt que sur un numéro.
Merci encore.:D
20/01/2012, 10h08
rawsrc

Citation:

Envoyé par Sergio_zero

que dois-je modifier dans le js pour que ça fonctionne sur un mot plutôt que sur un numéro.

Rien c'est juste la valeur du paramètre qui doit changer, soit tu passes un numérique soit un texte. Après c'est ton script appelé (php) qui doit gérer la différence.
22/01/2012, 01h01
Sergio_zero

Bonsoir rawsrc et merci beaucoup pour ton code, tous fonctionne.:ccool:
03/04/2012, 12h36
hamza.imad

Bonjour rawsrc,

Merci pour tes explications que j'ai suivie à la lettre avec mes requêtes. Ca marche sous firefox mais rien sur internet explorer.

Sais-tu pourquoi ?
03/04/2012, 13h27
rawsrc

Bonjour,

Quelle version de ie ?
Parce que si mes souvenirs sont bons, ie ne gère pas correctement l'évènement onchange(). C'est pour ça que tu n'as rien qui se passe.
Je vais regarder les versions ie concernées.
03/04/2012, 13h29
hamza.imad

c'est l'ancien ie 6 , car je suis en periode de stage et je suis obligé d'avoir un resultat compatible avec cette version :( . une semaine de galere pour cree 4 liste liée :s
03/04/2012, 13h34
hamza.imad

nn c'est pas le on change qui marche pas , car quand je choisie une valeur dans le 1er menu le 2ieme devien vide . l'action onchange marche nikelll

si j'avais pas eus de resultat sous firefox je me serai dis que c'est ma requette qui est mal faite mais c'est pas le cas
03/04/2012, 13h39
rawsrc

J'ai regardé ta source et l'ai parsée avec mon ide, résultat : il m'a trouvé une erreur : caractère invisible ligne 6 ici <script type='text/javascript'> entre le mot script et type.
Je l'ai juste remplacé par <script type="application/javascript"> et plus d'erreur. Quel éditeur utilises-tu ? L'encodage des fichiers est le même pour tous ?
03/04/2012, 13h43
rawsrc

Au fait c'est bien ie6 et < qui ne gère pas correctement le onchange(). Regardes si tu peux le remplacer par onclick() ou utiliser une rustine comme y en a plein sur le net.

EDIT :
Si mes souvenirs sont bons, ie6 ne tire l'évènement onchange que lorsque tu quittes le contrôle en cours et que le focus change. Tant que tu restes dessus, pas de onchange tiré.
03/04/2012, 13h43
hamza.imad

j'utilise eclipse comme éditeur , oui l'encodage est le meme pour tt les fichiers
03/04/2012, 13h49
hamza.imad

je vais essayer de voir comme tu ma dis " utiliser une rustine " meme si je ne suis pas suur de réussir vue que je suis debutant :) .

meme si d'apres se que j'ai compris le probleme viens du Innerhtml car ie6 ne le gere pas bien
03/04/2012, 13h59
rawsrc

Pour ton problème, Microsoft a publié une page de solutions : ici
03/04/2012, 14h09
hamza.imad
rawsrc, j'ai déjà vu cette page mais je n'arrive pas à mettre mon select au milieu d'une div.

Car dans le select, j’appelle la fonction qui modifie :
Code:

1 2 3 <label>menu22</label> <select name='menu2' id='menu2' onchange='go3()'> </select>
Alors si je mets une div, ça va donner ça, mais la syntaxe n'est pas bonne. :s
Code:

1 2 3 4 5 <div id=menu2 onchange='go3'> <label>menu22</label> <select name='menu2' > </select> </div>
03/04/2012, 14h16
rawsrc

et comme ça c'est pas mieux ?

Code:

<div id=menu2 onchange="go3()">
03/04/2012, 14h27
hamza.imad

je crois que c'est pas possible de metre onchange dans une div

Undefined attribute name (onchange).
03/04/2012, 14h42
rawsrc

Bah tu essayes avec onclick(). Après, il n'y aura pas de miracle non plus.
Le navigateur IE6 est plein de bogues. C'est une horreur à coder pour lui. Et puis de toute façon, tu perdras ton temps sans compter que tu y perdras aussi ton latin.
J'ai eu à faire un dev compatible avec IE6, j'ai dis OK mais j'ai viré toute l'ergonomie. Par exemple, pour gérer les onchange() j'avais mis des boutons Refresh à côté des listes ou un gros bouton Refresh unique qui prenait tous les critères et rappatriait les données. L'aspect dynamique était lié à un clic de bouton. Simple et rapide.
03/04/2012, 15h05
hamza.imad

Merci en tout cas rawsrc d'avoir essayé de m'aider.

Je vais essayer de trouver une solution de dépannage. :)
02/10/2012, 18h54
davidfl

Bonjour,
J'ai un problème sous Explorer 9, ça marche nikel sous firefox.
J'avais presque le même avec un seul select lié, onchange fonctionnne...
Mais la rien ne se met à jour dans la liste2..
Si quelqu'un peut m'aider?
Merci
02/10/2012, 19h10
andry.aime

Bonsoir

Peut-on voir ton code?

A+.