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

[AJAX] 4 listes liées

AJAX

Vue hybride

Discussions similaires

Partager

Partager