Discussion :

[guigui5931]

Bonjour à tous

Voila ce que j'essaye de faire : une liste de pays alimentée par une base de donnée. Une fois le pays choisit une liste de région de ce pays s'affiche. Cette liste est également alimentée par la base de donnée.
Certain pays n'ont pas de région la 2eme liste ne doit donc pas s'afficher. La page se trouve à cette adresse .
Sous IE tout se passe bien, mais sous Mozilla ça marche mal.
Voila le code de la partie ajax

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
 
if(isset($_POST["action"])){
		if ($_POST["action"]=="inscription_famille")
		{
			if(isset($_POST["id_pays"])){
 
				$SELECT="SELECT id_region, nom_region_key FROM region WHERE id_pays=".$_POST["id_pays"];
				$sql_interpreteur_ajax->executer_requete($SELECT);
				$text="";
				if ($sql_interpreteur_ajax->nombre_reponses()>0){
					$text.="<select name='region' id='region' onChange='gestionDepartement();'>";
					$text.='<option value="-1">'.texte_traduit('global_choisissez',true).'</option>';
					while($data_ajax = $sql_interpreteur_ajax->fetch_array())
					{
						$text.= "<option value='".$data_ajax["id_region"]."'>".getRegion($data_ajax["nom_region_key"],true)."</option>";
					}
					$text.= "</select>";
 
				}else
				{
					$text="";
				}
				echo $text;
			}
		}
}

La fonction javascript

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
 
function gestionRegion(){
				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
 
						if (leselect.length>1){
							document.getElementById('region').innerHTML = leselect;
							document.getElementById('intitule_region').innerHTML =" <?php texte_traduit("forms_label_region"); ?>" ;
						}
						else{
							document.getElementById('intitule_region').innerHTML ="";
							document.getElementById('region').innerHTML = "";
						}
 					}
				}
				// Ici on va voir comment faire du post
				xhr.open("POST","ajax_utils/gestionRegion.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
				sel = document.getElementById('pays');
				idpays = sel.options[sel.selectedIndex].value;
				xhr.send("id_pays="+idpays+"&action=inscription_famille");
			}

Merci d'avance pour votre aide

[d-Rek]

Chez moi ça passe.
Je vois juste ton alert(document.getElementById('region').innerHTML);

Pour ton problème de charset et les accents qui passent pas, configure ta base de donnée en UTF-8

[guigui5931]

J'avais avancé depuis ton message le problème ce passe lorsque l'on choisit un pays puis un autre pays (exemple tu choisit Afrique du Sud puis Algérie). Mozilla affiche la liste des régions du 2ème pays à l'intérieur de la première liste.

[jejetcr]

Bonjour,

Ton id nomer region devrait être unique, tu as un div id=region en dessous de la liste des pays et aussi ta liste des régions avec ce même id.
Cela pourrait être la cause de ton imbrication de listes.

[guigui5931]

Malheureusement ce n'est pas ça. J'ai rajouté des alerts dans ma fonction javascript qui donne des résultat plus qu'étonnant

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
 
function gestionRegion(){
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function(){
	if(xhr.readyState == 4 && xhr.status == 200){
		leselect = xhr.responseText;
                alert("resultat |"+leselect+"| ");
		if (leselect.length>1){
			document.getElementById('region').innerHTML = leselect;
			document.getElementById('intitule_region').innerHTML ="<?php texte_traduit("forms_label_region"); ?>" ;
		}
		else{
			document.getElementById('intitule_region').innerHTML ="";
			document.getElementById('region').innerHTML = "";
		}
 	}
        alert("div : |"+document.getElementById('region').innerHTML+"|");
	xhr.open("POST","ajax_utils/gestionRegion.php",true);
	xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	sel = document.getElementById('pays');
	idpays = sel.options[sel.selectedIndex].value;
	xhr.send("id_pays="+idpays+"&action=inscription_famille");
}

sous IE les 2 alerts sont identiques (normal j'attribue à un div le contenu d'une variable) de la forme ("<select ...><option>......</option></select>"). Mais sous Mozilla queand j'affiche le contenu de mon div je n'ai que les balise <option> le <select> et le </select> on disparu. Je ne vois vraiement pas pourquoi.
Vous pouvez voir un exemple plus simple à cet endroit

Merci d'avance pour votre aide

[goulmak]

Salut. Je pense que jejetcr avait raison lorsqu'il a dit que tu avais plusieurs éléments avec le même id.

J'ai regardé et essayé ton nouveau lien (http://www.bedycasa.com/fr/page_vide.php), lorsque l'on choisit un pays dans la première liste qui contient une sous liste, on se retrouve avec deux select (logique!) qui sont d'id respectivement "pays" et "region". Or le div qui contient le nouveau select porte aussi l'id "region", cf la source suivante de ta page :

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
 
    <select name="pays" id="pays" onchange="go();">
    <option value="-1">Choisissez...</option>
 
	<option value="1">Afganistan</option>
<option value="2">Afrique du Sud</option>
<option value="3">Albanie</option>
<option value="4">Algérie</option>
...
<option value="210">Yémen</option>
<option value="211">Zambie</option>
<option value="212">Zimbabwe</option>
			</select>
 
 
	<br>
	<div id="region"><select name="region" id="region"><option value="-1">Choisissez...</option><option value="198">Eastern Cape</option><option value="199">Free State</option><option value="200">Gauteng</option><option value="201">Eastern Cape</option><option value="202">Free State</option><option value="203">Gauteng</option><option value="204">Eastern Cape</option><option value="205">Free State</option><option value="206">Gauteng</option><option value="207">KwaZulu-Natal</option><option value="208">Limpopo</option><option value="209">Mpumalanga</option><option value="210">Northern Cape</option><option value="211">North West</option><option value="212">Western Cape</option></select></div>

C'est là que le mal est fait, pour la bonne raison qu'au prochain changement de pays (qu'il ai des régions ou non) le contenu sera inséré dans le dernier élément d'id "region" trouvé dans la page, c'est à dire le <select id="region"...> et non pas le <div id="region"...>

Si tu veux corriger ton problème, il va falloir changer l'id de ton div, soit celui du select créer via ajax.

Ainsi tu peux attribuer à ton div l'id "region_genere", en modifiant la fonction gestionRegion en conséquant, c'est à dire remplacer les occurences de region par region_genere dans les getElementById. Pour ce qui est de la fonction getsionDepartement, pas besoin de faire de modification car il me semble que le onChange de la seconde liste n'entraine pas la création d'une troisième.

Essayes de faire ces modifications qui sont simples et rapides.

Bon courage

[guigui5931]

Ça marche nickel. J'avais pas compris ce que je devais changer, merci à tous les 2 de vous être intéressé à mon problème .

[Equinoxe5]

Bonjour,

Pour alimenter une liste déroulante à partir d'une autre, ça fonctionne très bien, j'ai bien assimilé le concept. Mais comment faire quand la 1ere liste est dans une boucle et affichée disons 10 fois ?
Concretement, le résultat de ma requête Mysql me donne 10 résultats que j'affiche dans un tableau sous forme de 10 listes déroulantes.
Comment faire pour que chaque liste m'en affiche une nouvelle ?
Actuellement, chacune des 10 listes m'affiche la seconde liste qu'à la suite de la première.

Heu.... j'espère que ke je me fais bien comprendre.