Discussion :

[vallica]

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 :


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 :

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


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 :


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 :

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

valueDuSelectDeGauche.valueDuSelectDeDroite

et voici donc ce que je fais lors de l'affichage pour rendre leur état aux selects :

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

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
// 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 et merci d'avance !

[denisC]

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 et merci d'avance !

C'est d"un simple... J'ai du te relire trois fois.

Mais bon, voilà ma conclusion à ton problème: montre ta méthode getXHR()!

Sinon, sur la conception, personnellement, lorsque tu reviens à une page qui a un état enregistré, au lieu de mettre la deuxième liste à jour via Javascript, je le ferais directement en PHP au moment de la construction de la page (via la requete SQL qui va bien).
Mais bon, c'est mon avis sur la question

[vallica]

Re,

Alors effectivement, ce matin je ne voulais pas rester sur un echec alors j'ai adopté la solution que tu viens de me donner et qui fonctionne évidemment très bien.

Quant à ma getXhr la voilà :

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
function getXHR(){
	/* Création de l'instance de l'objet XMLHTTPRequest */
	var mon_objet = new Object ;	
 
	/* Si c'est Mozilla/Firefox/Nescape/opera/safari */
	if(window.XMLHttpRequest)
		mon_objet = new XMLHttpRequest();
	/* Si c'est Internet Explorer */
	else if(window.ActiveXObject)
		mon_objet = new ActiveXObject("Microsoft.XMLHTTP");
	/* Si aucun navigateur compatible avec XMLHttpRequest, on le signale */
	else
	{	alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest…");
		return; 
	}	
	return mon_objet;	
}

[denisC]

Re,

Alors effectivement, ce matin je ne voulais pas rester sur un echec alors j'ai adopté la solution que tu viens de me donner et qui fonctionne évidemment très bien.

Quant à ma getXhr la voilà :

Ta méthode XHR est bonne. Ca devait être un problème de timing.

De toute façon, je pense vraiment que la solution PHP est meilleure....