[AJAX] cacher des listes liées dynamiques

**Stageuse44** · 18/05/2011, 17h55

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 :

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

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

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

**andry.aime** · 18/05/2011, 18h22

Bonsoir,

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

A+.

**Stageuse44** · 18/05/2011, 18h51

J'ai remplacé comme tu me la dis, c'est plus propre maintenant, merci.

**vermine** · 19/05/2011, 15h23

Bonjour,

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

**andry.aime** · 19/05/2011, 15h45

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().

**vermine** · 19/05/2011, 16h01

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

**andry.aime** · 19/05/2011, 16h04

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.

**vermine** · 19/05/2011, 16h11

Envoyé par andry.aime

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

Je dirais "elle".

**Stageuse44** · 19/05/2011, 16h54

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 :

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

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

**Stageuse44** · 19/05/2011, 18h01

Bon alors je change en résolu, j'ai juste rajouté

Code :

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

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 .

**studio36** · 14/07/2011, 21h28

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.

**andry.aime** · 15/07/2011, 09h00

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

A+.

**Stageuse44** · 18/07/2011, 19h38

@ 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.

@+

[AJAX] cacher des listes liées dynamiques

AJAX

Discussions similaires

Partager

Partager