[AJAX] Liste liée Ajax dans une boucle For en php
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:
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:
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:
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 ?
