[AJAX] Restaurer l'état de listes liées par Ajax
Bonjour tout le monde,
Voilà j'ai un gros souçi qui m'embête vraiment, je vais essayer d'être le plus clair possible.
En fait j'ai une page sur laquelle j'ai ca :
http://www.hiboox.com/vignettes/4306/ba5110d5.jpg
Ce n'est pas un formulaire, ce sont juste des select, placés dans une table, et à chaque enregistrement je crée une nouvelle table bleue, donc sur la capture on a 2 enregistrements.
Le premier select (gauche) de chaque ligne a ses options écrites en dur dans le code, et sur le onchange j'appelle cette fonction ajax qui me remplit le select situé à sa droite.
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
| function remplirSelect(tableCible,dest){
listeDest=window.document.getElementById(dest);
/* récup de l'instance de l'objet XMLHTTPRequest */
var xhrSelect = getXHR();
xhrSelect.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhrSelect.readyState == 4 && xhrSelect.status == 200){
// on rempli le select de destination
var nbrElement = xhrSelect.responseXML.documentElement.childNodes.length
listeDest.options.length = nbrElement;
for (index=0;index<nbrElement;index++) {
var currentNode = xhrSelect.responseXML.documentElement.childNodes[index];
listeDest.options[index].value = currentNode.attributes[0].value;
listeDest.options[index].text = currentNode.firstChild.data;
//alert(currentNode.firstChild.data+" "+currentNode.attributes[0].value);
}
listeDest.options.selectedIndex = 0;
}
}
/* Variable qui contient les données */
var donnees = "table="+tableCible;
/* les données à transmettre sont concaténées à l'URL */
xhrSelect.open("GET", "valeurs/getListesPrest.php?"+donnees, true);
/* On envoie la requête */
xhrSelect.send(null);
} |
Le premier paramètre (tableCible) c'est le nom de la table en bdd dans laquelle aller chercher les items, et le second c'est simplement le select de destination dans lequel on place les options.
Je précise que ca fonctionne très bien, aucun conflit entre mes enregistrements, lignes, etc. car j'attribue des id dynamiquement à tous mes selects :
http://www.hiboox.com/vignettes/4306/2c29adec.jpg
Le problème viens lorsque je stocke la position des selects en base de données et que je veux la réafficher.
Le stockage se fait comme ca :
http://www.hiboox.com/vignettes/4306/f02aee78.jpg
donc on voit que j'ai 5 champs (hot,res,hpa,hlo,vil) qui stockent respectivement la position des 2 selects de chaque ligne sous la forme suivante :
Code:
valueDuSelectDeGauche.valueDuSelectDeDroite
et voici donc ce que je fais lors de l'affichage pour rendre leur état aux selects :
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
| <td align="right" width="10%">
Hotêllerie
</td>
<?php // si une valeur a été saisie via ce select on la positionne
$marqueur=array();
if ($ligne['hot']!="exclu" && $ligne['hot']!=""){
$valeurs=explode(".",$ligne['hot']);
$table=$valeurs[0];
$marqueur[$table]="selected";
}else
$marqueur['0']="selected";
?>
<td align="right" width="10%">
<select onchange="remplirSelect(this.options[this.selectedIndex].value,'champHot_<?=$ligne['_idPrestation']?>')" name="tableHot_<?=$ligne['_idPrestation']?>" id="tableHot_<?=$ligne['_idPrestation']?>">
<option <?=$marqueur['0']?> value="0">Choisir...</option>
<option <?=$marqueur['conf_hot']?> value="conf_hot">Conforts</option>
<option <?=$marqueur['equip_hot']?> value="equip_hot">Equipements</option>
<option <?=$marqueur['serv_hot']?> value="serv_hot">Services</option>
</select>
</td>
<td align="left">
<select name="champHot_<?=$ligne['_idPrestation']?>" id="champHot_<?=$ligne['_idPrestation']?>">
<option value="0">-</option>
</select>
<?php
// via javascript on appelle la fonction ajax qui remplit le second select en fonction de la valeur du premier
// et qui selectionne le champ toujours dans le second select
if ($ligne['hot']!="exclu"){
$valeurs=explode(".",$ligne['hot']);
$table=$valeurs[0];
$champ=$valeurs[1];
echo '<script type="text/javascript">';
echo "remplirSelectPlus('".$table."','champHot_".$ligne['_idPrestation']."','".$champ."');";
echo '</script>';
}
?>
</td> |
En fait je ne fais qu'appeller la fonction ajax qui est appellée sur le onchange du premier select, sauf que j'en ai créé une copie qui en plus de remplir le select de droite, le positionne sur la bonne valeur. Cela est fait en passant le 3ème paramètre. Voici son code :
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
| // idem que ci dessus mais positionne le select sur une valeur passée en param
function remplirSelectPlus(tableCible,dest,champPos){
listeDest=window.document.getElementById(dest);
/* récup de l'instance de l'objet XMLHTTPRequest */
var xhrSelect = getXHR();
xhrSelect.onreadystatechange = function(){
// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
if(xhrSelect.readyState == 4 && xhrSelect.status == 200){
// on rempli le select de destination
var nbrElement = xhrSelect.responseXML.documentElement.childNodes.length
listeDest.options.length = nbrElement;
for (index=0;index<nbrElement;index++) {
var currentNode = xhrSelect.responseXML.documentElement.childNodes[index];
listeDest.options[index].value = currentNode.attributes[0].value;
listeDest.options[index].text = currentNode.firstChild.data;
if (champPos==currentNode.attributes[0].value+""){
var marquePos=index;
}
}
listeDest.options.selectedIndex = marquePos;
}
}
/* Variable qui contient les données */
var donnees = "table="+tableCible;
/* les données à transmettre sont concaténées à l'URL */
xhrSelect.open("GET", "valeurs/getListesPrest.php?"+donnees, true);
/* On envoie la requête */
xhrSelect.send(null);
} |
Ouf, nous voici enfin à la conclusion : donc au final je n'ai qu'un seul select coté droit qui est rempli est correctement positionné.
Et à chaque fois c'est le dernier qui a été rempli par la fonction remplirSelectPlus, on dirait qu'il remet à 0 les précedents, ce qui est bizarre. Pourtant comme vous pouvez le voir sur une capture d'écran précedente, mes selects on bien des id différents !
J'éspère que vous aurez compris mon histoire :lol: et merci d'avance !
