[AJAX] Liste liée Ajax dans une boucle For en php

**milo1986** · 22/11/2012, 12h10

Bonjour,

Voilà je n'avais jamais utilisé Ajax avant (il faut une première à tout) et je devais faire une liste liée. J'ai donc trouver comment faire ici : http://siddh.developpez.com/articles/ajax/#LIV-A tout fonctionne quand je met en place mes 2 listes :une contenant un type d'opérations et l'autre contenant les détails d'opérations liés au type choisit. Jusque là rien de bien compliqué.

Par contre là où ça ne fonctionne pas c'est lorsque je veux faire afficher plusieurs fois les liest liées. Je m'explique :
Lorsque l'utilisateur arrive sur la page il choisit le nombre de ligne d'opération à saisir par exemple 5. Une fois validé 5 listes liées s'affiche (j'ai fait pour cela une boucle de type for ($i=1;$_POST['nbrope']>=$i; $i++) mes lignes s'affichent bien mais il n'y a que la première liste qui fonctionne.

j'ai donc pensé à donner un id unique à chaque ligne mais je ne doit pas le faire correctement car ça ne fonctionne pas.

je vous joint les différents codes :

Pour la page de saisie :

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
if (!isset($_POST['nbrope']))
					{
						echo '<form action="saisie_operation.php?carte='.$carte.'" method="post">';
						echo '<label>Nombre d\'operaiton à saisir</label>';
                        echo '<div class="form-row">';
                     	echo '<input type="text" name="nbrope" class="input-text small"/>';
                     	echo '<input type="submit" class="button" value="ok"/>';
                     	echo '</div>';
                    	 echo '</form>';
					}
					elseif (isset($_POST['nbrope']))
					{	
					$sql_vehicules_carte="SELECT * FROM VEHICULE, TYPE_VEHICULE, MARQUE_VEHICULE WHERE VEHICULE.NUM_TYPE_VEHICULE=TYPE_VEHICULE.NUM_TYPE_VEHICULE AND VEHICULE.NUM_MARQUE_VEHICULE=MARQUE_VEHICULE.NUM_MARQUE_VEHICULE AND VEHICULE.NUM_CARTE='$carte'";
					$req_vehicules_carte = mysql_query($sql_vehicules_carte) or die('Erreur SQL !<br>'.$sql_vehicules_carte.'<br>'.mysql_error());
 
					echo '<form action="" method="post">';
					echo '<label>Vehicule concerné :</label>';
                        echo '<div class="form-row">';
					echo '<select name="vehicule" class="input-text medium">';
 
					while ($data_vehicules_carte = mysql_fetch_assoc($req_vehicules_carte))
					  	{
							echo '<option value="'.$data_vehicules_carte['NUM_VEHICULE'].'">'.$data_vehicules_carte['NOM_MARQUE_VEHICULE'].' '.$data_vehicules_carte['NOM_TYPE_VEHICULE'].'</option>';
						}
					echo '</select>';
					echo '</div>';
					echo '<br><label>Type d\'opération / Détail opération / Prix TTC :</label>';
					for ($i=1;$_POST['nbrope']>=$i; $i++)	
					{
						 echo '<div class="form-row">';
						echo "<select name='typeop".$i."' id='typeop' onchange='go()' class='input-text small'>";
						echo "<option value='-1'>Aucun</option>";
 
						$res = mysql_query("SELECT * FROM TYPE_OPERATION");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["NUM_TYPEOP"]."'>".$row["NOM_TYPOP"]."</option>";
						}
 
						echo '</select>';
						echo "<div id='detail' style='display:inline' >";
						echo "<select name='detail' class='input-text small'>";
						echo "<option value='-1'>Choisir un type</option>";
						echo '</select>';
						echo '</div>';
						echo '</div>';
					}
					echo '</form>';
					}

Pour la page ajaxoperation.php

Code php :

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

1
2
3
4
5
6
7
8
9
10
11
include ('connect.php');
	echo "<select name='detail' class='input-text medium'>";
	if(isset($_POST["idTypeop"])){
 
		$res = mysql_query("SELECT NUM_DETAIL,LIB_DETAIL FROM DETAIL_OPERATION 
			WHERE NUM_TYPEOP=".$_POST["idTypeop"]." ORDER BY LIB_DETAIL");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["NUM_DETAIL"]."'>".$row["LIB_DETAIL"]."</option>";
		}
	}
	echo "</select>";

et bien entendu dans mon head de la page de saisie :

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
		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 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('detail').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxoperation.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 du type d'operation
				sel = document.getElementById('typeop');
				idtypeop = sel.options[sel.selectedIndex].value;
				xhr.send("idTypeop="+idtypeop);
			}

dois je répéter le script à chaque ligne dans la boucle ou y a t-il un autre moyen ?

**Bovino** · 22/11/2012, 14h03

Tout d'abord, merci de poster le code HTML généré pour ce qui concerne la page de base (pas pour le script appelé) !

Ensuite

Code php :

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

echo "<div id='detail' style='display:inline' >";

Répété un nombre incalculable de fois : un id doit être unique dans la page !

**milo1986** · 22/11/2012, 14h11

Oui je me dis aussi qu'il faudrait que je mette une variante sur l'id genre $i vu que je l'utilise. Mais dans ce cas là, la liste liée ne fonctionne plus. Il faudrait certainement que je puisse faire varier cet id dans le JavaScript mais vu que celui-ci est dans le head... Peut-être que je devrais l'intégrer dans ma boucle, non ?

Sinon le code html obtenu :

Code html :

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
<form action="" method="post">
<label>Vehicule concerné :</label>
<div class="form-row">
<select name="vehicule" class="input-text medium">
<option value="1">RENAULT KOLEOS</option></select></div><br><label>Type d'opération / Détail opération / Prix TTC :</label>
<div class="form-row">
<select name='typeop1' id='typeop' onchange='go()' class='input-text small'>
<option value='-1'>Aucun</option><option value='1'>MECANIQUE</option><option value='2'>CARROSSERIE</option>
<option value='3'>ACCESSOIRES</option>
<option value='4'>DEPANNAGE</option>
</select>
 
<div id='detail' style='display:inline' >
<select name='detail' class='input-text small'>
<option value='-1'>Choisir un type</option>
</select>
</div>
</div>
<div class="form-row">
<select name='typeop2' id='typeop' onchange='go()' class='input-text small'>
<option value='-1'>Aucun</option>
<option value='1'>MECANIQUE</option><option value='2'>CARROSSERIE</option><option value='3'>ACCESSOIRES</option>
<option value='4'>DEPANNAGE</option>
</select>
<div id='detail' style='display:inline' >
<select name='detail' class='input-text small'>
<option value='-1'>Choisir un type</option>
</select>
</div>
</div>
<div class="form-row">
<select name='typeop3' id='typeop' onchange='go()' class='input-text small'>
<option value='-1'>Aucun</option>
<option value='1'>MECANIQUE</option>
<option value='2'>CARROSSERIE</option>
<option value='3'>ACCESSOIRES</option>
<option value='4'>DEPANNAGE</option>
</select>
<div id='detail' style='display:inline' >
<select name='detail' class='input-text small'>
<option value='-1'>Choisir un type</option>
</select>
</div>
</div>
<div class="form-row">
<select name='typeop4' id='typeop' onchange='go()' class='input-text small'>
<option value='-1'>Aucun</option>
<option value='1'>MECANIQUE</option>
<option value='2'>CARROSSERIE</option>
<option value='3'>ACCESSOIRES</option>
<option value='4'>DEPANNAGE</option>
</select><div id='detail' style='display:inline' >
<select name='detail' class='input-text small'>
<option value='-1'>Choisir un type</option>
</select></div></div><div class="form-row">
<select name='typeop5' id='typeop' onchange='go()' class='input-text small'>
<option value='-1'>Aucun</option>
<option value='1'>MECANIQUE</option>
<option value='2'>CARROSSERIE</option>
<option value='3'>ACCESSOIRES</option><option value='4'>DEPANNAGE</option></select>
<div id='detail' style='display:inline' >
<select name='detail' class='input-text small'>
<option value='-1'>Choisir un type</option></select>
</div>
</div>
</form>                    
</div>

**milo1986** · 22/11/2012, 15h49

Du coup pour tester j'ai fais une nouvelle page html en mettant 2 fois la ligne de listes liées et en y mettant des id incrémenté (comme dans ma boucle for) mais cela ne fonctionne pas

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
87
88
89
90
<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;
			}
			</script>
                 	<form action="" method="post">
                    <label>Vehicule concerné :</label>
                    <div class="form-row">
                    <select name="vehicule" class="input-text medium">
                    <option value="1">RENAULT KOLEOS
                    </option>
                    </select>
                    </div>
                    <br>
                    <label>Type d'opération / Détail opération / Prix TTC :</label>
					<script type='text/javascript'>
					function go(){
						var xhr = getXhr();
						xhr.onreadystatechange = function(){
							if(xhr.readyState == 4 && xhr.status == 200){
								leselect = xhr.responseText;document.getElementById('detail1').innerHTML = leselect;
								}
								}
								xhr.open("POST","ajaxoperation.php",true);
								xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
								sel = document.getElementById('typeop1');
								idtypeop1 = sel.options[sel.selectedIndex].value;
								xhr.send("idTypeop="+idtypeop1);
								}
                                </script>
                                <div class="form-row">
                                <select name='typeop1' id='typeop1' onchange='go()' class='input-text small'>
                                <option value='-1'>Aucun</option>
                                <option value='1'>MECANIQUE</option>
                                <option value='2'>CARROSSERIE</option>
                                <option value='3'>ACCESSOIRES</option>
                                <option value='4'>DEPANNAGE</option>
                                </select>
                                <div id='detail1' style='display:inline' >
                                <select name='detail1' class='input-text small'>
                                <option value='-1'>Choisir un type</option></select>
                                </div>
 
                                <script type='text/javascript'>
					function go(){
						var xhr = getXhr();
						xhr.onreadystatechange = function(){
							if(xhr.readyState == 4 && xhr.status == 200){
								leselect = xhr.responseText;document.getElementById('detail2').innerHTML = leselect;
								}
								}
								xhr.open("POST","ajaxoperation.php",true);
								xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
								sel = document.getElementById('typeop2');
								idtypeop2 = sel.options[sel.selectedIndex].value;
								xhr.send("idTypeop="+idtypeop2);
								}
                                </script>
                                <div class="form-row">
                                <select name='typeop2' id='typeop2' onchange='go()' class='input-text small'>
                                <option value='-1'>Aucun</option>
                                <option value='1'>MECANIQUE</option>
                                <option value='2'>CARROSSERIE</option>
                                <option value='3'>ACCESSOIRES</option>
                                <option value='4'>DEPANNAGE</option>
                                </select>
                                <div id='detail2' style='display:inline' >
                                <select name='detail2' class='input-text small'>
                                <option value='-1'>Choisir un type</option></select>
                                </div>
 
 
 
 
                                </div>

**andry.aime** · 22/11/2012, 16h20

Bonjour,

1- Tu as 2 fois la fonction go().
2- N'utilise pas une même valeur pour un attribut name et id de différents éléments, tu pourrais avoir de soucis avec IE.

A+.

**milo1986** · 22/11/2012, 19h04

Effectivement je n'avais pas fait attention au nom de ma fonction. En lui ajoutant également la variable $i tout fonctionne. Merci bien

**andry.aime** · 23/11/2012, 06h48

Tu n'es pas obligé de créer de fonction pour chaque select, tu peux utiliser une fonction avec des paramètres.

A+.

[AJAX] Liste liée Ajax dans une boucle For en php

AJAX

Discussions similaires

Partager

Partager