[AJAX] cacher des listes liées dynamiques

Version imprimable

Bonjour,
J'ai fais 3 listes liées que se remplissent automatiquement avec la bdd en ajax.
Mais je voudrais cacher les 2 dernières listes si il n'y a pas de correspondance dans la précédente.

<lien url="http://locationsenligne.com/locations-immobilieres/recherche-avancee.php">Ici</lien>, les listes sont pour pays, région et département. Je souhaiterais que s'il n'y a pas de régions enregistrées pour un pays, les lignes des régions et départements ne s'affichent pas, de même, s'il n'y a pas de départements enregistrés pour un pays et une région, la ligne de département ne s'affiche pas.

Le problème vient du fait que je suis obligé d'attendre que les listes soient remplis avant d'appeler ma fonction.
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 function cache() { //si pas de subdivision_1 ... if (document.getElementById('subdivision_1').options.length==0) { //on cache le <tr> region_part et depart_part document.getElementById('region_part').style.visibility="hidden"; } else { document.getElementById('region_part').style.visibility="visible"; } //si pas de subdivision_2 ... if (document.getElementById('subdivision_2').options.length==0) { //on cache le <tr> region_part et depart_part document.getElementById('depart_part').style.visibility="hidden"; } else { document.getElementById('depart_part').style.visibility="visible"; } } function change_cache1() { change(); cache(); } function change_cache2() { change2(); cache(); }
Et l'appel se faisant comme ceci :
Code:

1 2 <select name="pays" id="pays" onchange="change_cache1()"> <select name="subdivision_1" id="subdivision_1" onchange="change_cache2()">
Si quelqu'un pouvais m'expliquer comment attendre la fin de la première fonction avant d'exécuter la deuxième ...
Merci

18/05/2011, 17h22
andry.aime

Bonsoir,

Utilise display="none" et display="block" à la place de visibility.

A+.
18/05/2011, 17h51
Stageuse44

J'ai remplacé comme tu me la dis, c'est plus propre maintenant, merci.
19/05/2011, 14h23
vermine

Bonjour,

Vous parlez de quelles fonctions ? Parce que normalement elles s'exécutent l'une après l'autre. :?
19/05/2011, 14h45
andry.aime

Citation:

Envoyé par vermine

Bonjour,

Vous parlez de quelles fonctions ? Parce que normalement elles s'exécutent l'une après l'autre. :?

De la fonction cache().
19/05/2011, 15h01
vermine

Appel Ajax, s'entend.
La fonction cache() doit être appelée dans la fonction de retour de l'appel Ajax.
19/05/2011, 15h04
andry.aime

Citation:

Envoyé par vermine

Appel Ajax, s'entend.
La fonction cache() doit être appelée dans la fonction de retour de l'appel Ajax.

Effectivement, s'il travaille en mode asynchrone, il doit modifier sont code.
19/05/2011, 15h11
vermine

Citation:

Envoyé par andry.aime

Effectivement, s'il travaille en mode asynchrone, il doit modifier sont code.

Je dirais "elle". :P

Oui c'est bien "elle", merci pour votre aide, quand vous dites la fonction de retour de ajax sa correspond a quel endroit ?

J'ai fais ceci pour l'instant,

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
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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
function change()
{	
	//Si c'est AUCUN qui est sélectionné, il faut réinitialiser les 2 autres combos et quitter
	var sel = document.getElementById('pays');
	if (sel.options[sel.selectedIndex].value == -1) 
	{
		document.getElementById('subdivision_1').options.length=0;
		document.getElementById('subdivision_2').options.length=0;
		return;
	}
 
	var xhr = getXhr();
	// On défini ce qu'on va faire quand on aura la réponse
	xhr.onreadystatechange = function()
	{
		//attendons que le requete soit finie...
		if(xhr.readyState == 4 && xhr.status == 200)
		{
			var rst = xhr.responseXML;
			var items=rst.getElementsByTagName('element');
			document.getElementById('subdivision_1').options.length=0;
			//penser à réinitialiser aussi subdivision_2
			document.getElementById('subdivision_2').options.length=0;
 
			var myOption = new Option(" ","-1",true);
			document.getElementById('subdivision_1').options[0]=myOption;
 
			for(var i=0;i<items.length;i++)
			{
				var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
				document.getElementById('subdivision_1').options[i+1]=myOption;
			}
			document.getElementById('subdivision_1').selectedIndex=0;
			//mise à jour de subdivision_2 pour la 1ere subdivision_1 affiché (sinon incohérence au niveau de l'affichage)
			change2();
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxSubdivision1.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 pays
	sel = document.getElementById('pays');
	pays = sel.options[sel.selectedIndex].value;
	xhr.send("Pays="+pays);			
}
 
function change2()
{
	//si une seule subdivision_1 ...	
	if (document.getElementById('subdivision_1').options.length==1) 
	{
		//on vide la derniere combo
		document.getElementById('subdivision_2').options.length==0; 
		//on quitte
		return;
	}
 
	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)
		{
			var rst = xhr.responseXML;
			var items=rst.getElementsByTagName('element');
			document.getElementById('subdivision_2').options.length=0;
 
			var myOption = new Option(" ","-1",true);
			document.getElementById('subdivision_2').options[0]=myOption;
 
			for(var i=0;i<items.length;i++)
			{
				var myOption = new Option(items[i].getElementsByTagName('option')[0].firstChild.nodeValue,items[i].getElementsByTagName('valeur')[0].firstChild.nodeValue,false,true)
				document.getElementById('subdivision_2').options[i+1]=myOption;
			}
			document.getElementById('subdivision_2').selectedIndex=0;
			cache();
		}
	}
 
	// Ici on va voir comment faire du post
	xhr.open("POST","ajaxSubdivision2.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 de la region et du pays
 
	sel2 = document.getElementById('pays');
	pays = sel2.options[sel2.selectedIndex].value;
 
	sel = document.getElementById('subdivision_1');
	subdivision_1 = sel.options[sel.selectedIndex].value;
 
	xhr.send("Subdivision1="+subdivision_1 + "&Pays="+pays);		
}
 
function cache()
{
 
	// On cache la partie département (subdivision_2)
	document.getElementById('depart_part').style.display="none";
	// Si il n'y a pas de region (subdivision_1) ...
	if (document.getElementById('subdivision_1').options.length == 1) 
	{
		// On cache la partie region_part
		document.getElementById('region_part').style.display="none";
	}
	else
	{
		// Sinon on la montre
		document.getElementById('region_part').style.display="block";
	}
 
	// Si il n'y a pas de département (subdivision_2) ...
	if (document.getElementById('subdivision_2').options.length == 1) 
	{
		// On cache la partie depart_part
		document.getElementById('depart_part').style.display="none";
	}
	else
	{
		// Sinon on la montre
		document.getElementById('depart_part').style.display="block";
	}
}

et dans les fichiers ajaxSubdivision1.php et ajaxSubdivision2.php c'est la même chose juste le nom des tables change :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
        mysql_connect(HOST,USER,PASS) or die('Unable to connect to database');
        mysql_select_db(DBNAME) or die('Unable to select database');
        mysql_query('set names utf8');
        
        header("Content-type:text/xml;charset=utf-8");
        echo '<?xml version="1.0" encoding="UTF-8"?>';
    echo "<elements>";
        if(isset($_POST["Pays"]))
        {
                $res = mysql_query('SELECT id_subdivision_1, nom1_subdiv1_'.LANG.' FROM subdivision_1 WHERE pays_id="'.$_POST["Pays"].'" ORDER BY nom1_subdiv1_'.LANG);
                while($row = mysql_fetch_assoc($res))
                {
                        echo '<element>';
            echo "<option>".$row['nom1_subdiv1_'.LANG]."</option>";
            echo "<valeur>".$row['id_subdivision_1']."</valeur>";
            echo '</element>';
                }
        }
        echo "</elements>";
?>

Sa fonctionne pour la première sélection mais si jamais on va prendre l'hypothèse que je me suis trompé je veux changer alors la les cases restent apparentes vous sauriez pourquoi ?

19/05/2011, 17h01
Stageuse44
Bon alors je change en résolu, j'ai juste rajouté
Code:

1 2 document.getElementById('region_part').style.display="none"; document.getElementById('depart_part').style.display="none";
Au tout début de la fonction change().

Et sa fonctionne !
Merci a Vermine et Andry.Aime .
14/07/2011, 20h28
studio36

Bonjour,

S'il te plait Stageuse44 pourrais tu me poster le code de ton fichier html ?

Je dois aussi relier 3 listes , les deux premieres marchent tres bien mais la troisieme persiste toujours :@

Merci d'avance.
15/07/2011, 08h00
andry.aime

:salut:

@studio36 : tu peux nous montrer ton code qui ne fonctionne pas afin de pouvoir t'aider.

A+.
18/07/2011, 18h38
Stageuse44

@ Studio36 :

Bonjour je suis désolé mais j'ai terminé ce projet et je n'ai pas gardé les codes, mais poste ton code pour que l'on puisse t'aider a résoudre ton problème. :D

@+