Discussion :

[General_Batton]

Salut tout le monde et bonne année!

Toujours en quête de solutions miracles je teste en ce moment une solution de liste déroulante dynamiques liées, à partir d'un fichier XML. Dans cet exemple le sujet des deux listes est le lien entre un pays et ses régions ou provinces.

J'utilise donc Jquery et Ajax pour naviguer dans mon fichier XML et en récupérer les valeurs appropriées.

J'ai réussi à obtenir un résultat positif avec la liste déroulante relative aux pays, par contre je rencontre des difficultés avec celle des régions.

Voici les bout de codes relatifs aux listes liées:

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
12
<form id="frmRecherche" name="frmRecherche" method="post">
	<label>Pays : </label>
	<select name="sPays_nom" id="sPays_nom">
		<option value="-100">&nbsp;---&nbsp;</option>
	</select>	
 
 
	<label>R&eacute;gion : </label>
	<select name="sRegionLG_nom" id="sRegionLG_nom">
		<option value="-100">&nbsp;---&nbsp;</option>
	</select>
</form>

Code XML :

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
<?xml version="1.0" encoding="utf-8"?>
<Terre>
	<Pays>
		<PaysID>1039</PaysID>
		<PaysNameEN>Rwanda</PaysNameEN>
		<PaysNameFR>Rwanda</PaysNameFR>
		<Regions>
			<Region>
				<RegionID>10575</RegionID>
				<RegionName>Eastern Province</RegionName>
			</Region>
			<Region>
				<RegionID>10576</RegionID>
				<RegionName>Kigali City</RegionName>
			</Region>
			<Region>
				<RegionID>10577</RegionID>
				<RegionName>Northern Province</RegionName>
			</Region>
			<Region>
				<RegionID>10578</RegionID>
				<RegionName>Southern Province</RegionName>
			</Region>
			<Region>
				<RegionID>10579</RegionID>
				<RegionName>Western Province</RegionName>
			</Region>
		</Regions>
	</Pays>
	<Pays>
		<PaysID>1044</PaysID>
		<PaysNameEN>Sierra Leone</PaysNameEN>
		<PaysNameFR>Sierra Leone</PaysNameFR>
		<Regions>
			<Region>
				<RegionID>10624</RegionID>
				<RegionName>Eastern Province</RegionName>
			</Region>
			<Region>
				<RegionID>10625</RegionID>
				<RegionName>Northern Province</RegionName>
			</Region>
			<Region>
				<RegionID>10626</RegionID>
				<RegionName>Southern Province</RegionName>
			</Region>
			<Region>
				<RegionID>10627</RegionID>
				<RegionName>Western Area</RegionName>
			</Region>
		</Regions>
	</Pays>
</Terre>

Code JS :

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
jQuery(document).ready(function($){ 
	$.ajax({
		type: "GET",
		url: './includes/data/geographie.xml',
		dataType: "xml",
		success: function(xml) 
		{
			var arrayPays = new Array();
			$("#sPays_nom").get(0).length = 1;
 
			//je boucle sur tous les noeuds <Pays>
			$(xml).find('Pays').each(   
				function()
				{
					// création d'une table qui permettra de 
					// trier les données alphabétiquement
					arrayPays[arrayPays.length] = $(this);
				}
			);
			// #hiddenLangue est un input caché qui me permet de savoir 
			// en quelle langue afficher les résultats
			var LG = $("#hiddenLangue").val(); 
			(LG == "FR") ? var NAME = "PaysNameFR"; : var NAME = "PaysNameEN"; 
 
			//triage alphabétique des pays pour affichage dans la liste déroulante
			arrayPays.sort(function(a,b){
				paysA = a.find(NAME).text();
				paysA = effacerAccents(paysA);
				paysB = b.find(NAME).text();
				paysB = effacerAccents(paysB);
				if (paysA < paysB){
					return -1;
				}else return 1;
			});
			// création des options avec les données appropriées
			for (indexPays = 0; indexPays<arrayPays.length; indexPays ++){
				var ID = arrayPays[indexPays].find('PaysID').text();
				var PAYS = arrayPays[indexPays].find(NAME).text();
				$("#sPays_nom").append(new Option(PAYS, ID, false, true));
			}
			// placer le selected par défaut sur 'vide'
			$("#sPays_nom").val(-100);
		}
	});
 
	// cette fonction s'active au changement de selected (onChange)
	$("#sPays_nom").change(function()
	{
		var paysSelected = this.value;
		$.ajax({
			type: "GET",
			url: './includes/data/geographie.xml',
			dataType: "xml",
			success: function(xml) 
			{
				$("#sRegionLG_nom").get(0).length = 1;
				// je ne vois pas comment atteindre 
				// <Pays> ==> <PaysID>1039</PaysID> ==> <Regions>
				// puis boucler tout les éléments <Region>
				// (biensur 1039 est un exemple qui correspond à paysSelected
			}
		});
	});	
});

En fait je ne sais pas comment atteindre spécifiquement le noeud <Pays> dans lequel se trouvent <PaysID>1039</PaysID> (c'est un exemple). Pour pouvoir ensuite atteindre son noeud <Regions> et boucler sur tous les noeuds <Region>.

En fait ce que je ne sais pas faire c'est atteindre le le Pays ayant l'ID 1039 pour le reste je peux me débrouiller mais ça, j'ai eu beau essayer pleins de solutions, je n'arrive à rien.

Auriez-vous une idée?

Thx et bonne journée.

[Bovino]

Regarde du côté de :contains() Selector.

[bigboomshakala]

Bonjour,

Ce serait pas plus efficace de (au choix) :

1. transformer ton xml en JS (objet json, array, ce que tu veux) et de ne plus faire d'appel serveur (ajax) derrière ?
2. faire une requête ajax avec en paramètre le pays sélectionné et ça te renvoie uniquement le noeud pays qui va bien ? (ou la liste des régions uniquement)

[General_Batton]

Merci à vous deux pour vos réponses.

@bigboomshakala :

1 - Je me suis posé la même question en effet. Cela me semblerait plus logique de faire un json (par exemple) et de travailler directement dessus. Je vais me pencher sur cette solution.

2 - "faire une requête ajax avec en paramètre le pays sélectionné" : c'est justement ce que je n'arrive pas à faire!

@Bovino : merci cela m'a aidé à trouver le bon pays. J'ai encore du mal à boucler les régions du pays sélectionné ùais on s'en approche.

[bigboomshakala]

De tête, une requête ajax avec paramètre (data) c'est qqchose comme ça (vérifier la syntaxe sur la doc jquery)

Code :

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

1
2
3
4
5
$.ajax({
  type: "GET",
  url: './includes/data/geographie.xml',
  data: { "pays": "France" }
  ...

c'est l'équivalent de "./includes/data/geographie.xml?pays=France"

Après c'est à toi de gérer côté serveur la prise en compte du paramètre pour envoyer les données qui conviennent

[General_Batton]

Voici mon avancée (je persiste dans la même direction juste pour ne pas m'avouer vaincu, j'étudierai les autres options plus tard.).

J'arrive enfin à afficher les fameuses régions du pays sélectionné Par contre j'ai quand même un big problème : je n'ai pas un 'option' par région mais un seul option qui colle toutes mes régions les unes aux autres.

Je ne vois pas trop pourquoi ça réagit comme ça.

Code JS :

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
// cette fonction s'active au changement de selected (onChange)
$("#sPays_nom").change(function()
{
	var paysSelected = this.value;
 
	$.ajax({
		type: "GET",
		url: './includes/data/geographie.xml',
		dataType: "xml",
		success: function(xml) 
		{
			$("#sRegionLG_nom").get(0).length = 1;
			var arrayRegions = new Array();
 
			$(xml).find('PaysID:contains('+paysSelected+')').next().next().next().each(
				function()
				{
					arrayRegions[arrayRegions.length] = $(this);
				}
			);
 
			//triage alphabétique des pays pour affichage dans la liste déroulante			
			arrayRegions.sort(function(a,b){
				regionA = a.text();
				regionA = effacerAccents(regionA);
				regionB = b.text();
				regionB = effacerAccents(regionB);
				if (regionsA < regionB){
					return -1;
				}else return 1;
			});
			// création des options avec les données appropriées
			for (indexRegions = 0; indexRegions<arrayRegions.length; indexRegions ++)
			{
			var ID = arrayRegions[indexRegions].find('RegionID').text();
			var REGIONS = arrayRegions[indexRegions].find('RegionName').text();
			$("#sRegionLG_nom").append(new Option(REGIONS, ID, false, true));  
			}  
			// placer le selected par défaut sur 'vide'
			$("#sRegionLG_nom").val(-100);
		}
	});
});

D'un autre côté ça fait surement trop longtemps que je suis dessus, il doit y avoir une erreur flagrante qui me passe sous le nez.

[danielhagnoul]

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
/*
 * Construction de l'array pays.
 */
var jObjPays = $( xml ).find( "Terre" ).children( "Pays" ),
	paysLength = jObjPays.length,
	jObjPaysID = jObjPays.children( "PaysID" ),
	jObjPaysNameFr = jObjPays.children( "PaysNameFR" ),
	jObjRegions = jObjPays.children( "Regions" ),
	regions = [],
	pays = [],
	jObjRegion = null,
	jObjRegionLength = 0;
 
for( var i = 0; i < paysLength; i++ ){
	jObjRegion = jObjRegions.eq( i ).children( "Region" );
	jObjRegionLength = jObjRegion.length;
 
	for ( var j = 0; j < jObjRegionLength; j++ ){
		regions.push( [ 
			jObjRegion.eq( j ).children( "RegionID" ).text(), 
			jObjRegion.eq( j ).children( "RegionName" ).text()
		] );
	}
 
	pays.push( [
		jObjPaysID.eq( i ).text(), 
		jObjPaysNameFr.eq( i ).text(),  
		regions
	] );
 
	regions = [];
	jObjRegion = null;
	jObjRegionLength = 0;
}
 
/*
 * Contenu de l'array pays.
 * Affichage dans la console pour test.
 */
pays.forEach( function( value ){
	console.log( "PaysID = ", value[ 0 ] );
	console.log( "PaysNameFR = ", value[ 1 ] );
 
	value[ 2 ].forEach( function( region ){
		console.log( "RegionID = ", region[ 0 ] );
		console.log( "RegionName = ", region[ 1 ] );
	});
 
	console.log( "/********/" );
});

[General_Batton]

Merci danielhagnoul j'ai enfin réussi à comprendre ton code et à l'adapter à mon cas d'utilisation.

Cela fonctionne parfaitement

Je mets mon code JS en entier si jamais ça pouvais servir à quelqu'un.

Code JS :

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
91
92
93
94
95
96
97
98
99
jQuery(document).ready(function($){ 
	// si un élément ayant pour ID 'sPays_nom' existe
	// on génère la liste déroulante des pays
	if($("#sPays_nom".length != 0))
	{
		$.ajax({
			type: "GET",
			url: './includes/data/geographie.xml',
			dataType: "xml",
			success: function(xml) 
			{
				// Construction de l'array pays.
				var jObjPays = $( xml ).find( "Terre" ).children( "Pays" ),
					paysLength = jObjPays.length,
					jObjPaysID = jObjPays.children( "PaysID" ),
					jObjPaysNameEn = jObjPays.children( "PaysNameEN" ),
					jObjPaysNameFr = jObjPays.children( "PaysNameFR" ),
					jObjRegions = jObjPays.children( "Regions" ),
					regions = [],
					pays = [],
					jObjRegion = null,
					jObjRegionLength = 0;
 
				for( var i = 0; i < paysLength; i++ )
				{
					jObjRegion = jObjRegions.eq( i ).children( "Region" );
					jObjRegionLength = jObjRegion.length;
 
					for ( var j = 0; j < jObjRegionLength; j++ ){
						regions.push( [ 
							jObjRegion.eq( j ).children( "RegionID" ).text(), 
							jObjRegion.eq( j ).children( "RegionName" ).text()
						] );
					}
 
					pays.push( [
						jObjPaysID.eq( i ).text(),
						jObjPaysNameEn.eq( i ).text(), 
						jObjPaysNameFr.eq( i ).text(),  
						regions
					] );
 
					regions = [];
					jObjRegion = null;
					jObjRegionLength = 0;
				}
				 var LG = $("#hiddenLangue").val();
				(LG == "FR") ? NAME = 2 : NAME = 1; 
 
				//triage alphabétique des pays pour affichage dans la liste déroulante			
				pays.sort(function(a,b){
					paysA = a[NAME];
					paysA = effacerAccents(paysA);
					paysB = b[NAME];
					paysB = effacerAccents(paysB);
					if (paysA < paysB){
						return -1;
					}else return 1;
				});
 
				pays.forEach( function(value)
				{
					$("#sPays_nom").append("\r\t\t\t\t\t\t\t\t\t");
					$("#sPays_nom").append(new Option(value[ NAME ], value[ 0 ], false, true));
				});
				// placer le selected par défaut sur 'vide'
				$("#sPays_nom").val(-100);
 
				if(($("#sPays_nom".length != 0)) && ($("#sRegionLG_nom".length != 0)))
				{
					// cette fonction s'active au changement de selected (onChange)
					$("#sPays_nom").change(function()
					{
						paysSelected = this.value;
						$("#sRegionLG_nom").get(0).length = 1;
						pays.forEach(
							function(value)
							{ 
								//alert(paysSelected);
								if(value[0] == paysSelected)
								{
									value[3].forEach(
										function(region)
										{
											$("#sRegionLG_nom").append(new Option(region[1], region[0], false, true));
											$("#sRegionLG_nom").append("\n\t\t\t\t\t\t\t\t\t");
										});
								}
							});
						// placer le selected par défaut sur 'vide'
						$("#sRegionLG_nom").val(-100);
					});
					$("#sRegionLG_nom").get(0).length = 1;
					$("#sRegionLG_nom").val(-100);
				}
			}
		});
	}
});

Merci à tous les participants à ce sujet.