[AJAX] 4 listes liées

**Sergio_zero** · 16/01/2012, 07h42

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.

**andry.aime** · 16/01/2012, 09h09

Bonjour,

1-

function changeLesListes(num){
var num;

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

2-

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

Vire les de ton code php.

A+.

**Sergio_zero** · 16/01/2012, 18h28

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 ?

**Bovino** · 16/01/2012, 18h35

Code :

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

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 :

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

function changeLesListes(num){...}

Que dois je faire ?

Peut-être apprendre les bases ?

**Sergio_zero** · 16/01/2012, 19h21

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.

**rawsrc** · 18/01/2012, 10h37

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 :

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
<?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 :

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
/* 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 :

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
<?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 :

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
<?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 :

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
<?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.

**Sergio_zero** · 18/01/2012, 19h33

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.

**Sergio_zero** · 20/01/2012, 07h45

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.

**rawsrc** · 20/01/2012, 10h08

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.

**Sergio_zero** · 22/01/2012, 01h01

Bonsoir rawsrc et merci beaucoup pour ton code, tous fonctionne.

**hamza.imad** · 03/04/2012, 12h36

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 ?

**rawsrc** · 03/04/2012, 13h27

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.

**hamza.imad** · 03/04/2012, 13h29

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

**hamza.imad** · 03/04/2012, 13h34

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

**rawsrc** · 03/04/2012, 13h39

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 ?

**rawsrc** · 03/04/2012, 13h43

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é.

**hamza.imad** · 03/04/2012, 13h43

j'utilise eclipse comme éditeur , oui l'encodage est le meme pour tt les fichiers

**hamza.imad** · 03/04/2012, 13h49

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

**rawsrc** · 03/04/2012, 13h59

Pour ton problème, Microsoft a publié une page de solutions : ici

**hamza.imad** · 03/04/2012, 14h09

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 :

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

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 :

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

1
2
3
4
5
<div id=menu2 onchange='go3'>
	<label>menu22</label>
	<select name='menu2' >
	</select>
</div>

[AJAX] 4 listes liées

AJAX

Discussions similaires

Partager

Partager