formulaire - ligne de délimitation - show/hide

**erox44** · 21/12/2011, 15h08

Hello,
je vous explique le contexte:
J'ai un formulaire construit de la sorte :

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
<form>
	<div class='A'>
		<div id='toto'>
			<a href='#' onclick="show(toto)">TOTO</a>
		</div>
		<table>
			<tr>
				<!-- mon input (radio/text/select ...)-->
			</tr>
			<tr class='separation'></tr>
			<tr>
				<!-- mon input (radio/text/select ...)-->
			</tr>			
			...
		</table>
	</div>
	<div class='B'>
		<div id='tata'>
			<a href='#' onclick="show('tata')">TATA</a>
		</div>
		<table>
			<tr>
				<!-- mon input (radio/text/select ...)-->
			</tr>
			<tr class='separation'></tr>
			<tr>
				<!-- mon input (radio/text/select ...)-->
			</tr>			
			...
		</table>	
	</div>
	<!-- ... -->
</form>

j'ai donc des separation (class='separation') qui sont de simples lignes blanches entre certains champs.

Au chargement de mon formulaire il n'y a que disons la div A affichée, les autres étant cachées(je cache juste le table pour qu'on voit les titres), et, selon certains critères, tels ou tels champs (tr) sont affichés ou non (display:none).
Le problème à ce moment là, c'est que les lignes de séparations sont toujours présentes, c'est du coup, assez moche visuellement.

Pour le moment je limite la casse avec cette 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
function visi_separations(id){
 
	var nb = 0;
	$("#"+id).next().find(".separation").each(function(){
		nb = 0;
		$(this).nextAll().each(function(){
 
			if($(this).is(":visible") ){
				nb++;
				return false;
			}
		});
		if(nb == 0)
			$(this).hide();
 
	});
 
}

Celle-ci est appelée lorsque qu'on clique sur les liens (ça affiche le bloc puis ca check les separations), ça c'est ok.
Le problème c'est que dynamiquement quand on change tel ou tel valeur dans tel ou tel input, certaines lignes apparaissent et disparaissent, du coup il arrive que dans un bloc, il n'y ai plus aucun input visible mais la séparation est encore là.

Du coup, je vois pas trop à quel moment je devrais appeler ma fonction visi_separations, l'appeler dans le onchange de chaque champ, c'est assez moche je trouve, et niveau perf, je pense pas que ce soit top, mais là, je vois pas trop comment faire autrement.

Si vous avez une idée, je suis preneur :p

EDIT: pour le moment je lance donc ma fonction visu_separation lorsqu'on affiche un bloc, et aussi sur le mousemove() , ca fonctionne bien , mais bon ca reste moche

**danielhagnoul** · 22/12/2011, 01h32

Bonsoir

Pour :

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
<form id="formID">
	<div class='A'>
		<div>
			<a id="toto" href="#">TOTO</a>
		</div>
		<table>
			<tbody>
				<tr>
					<td>un</td>
				</tr>
				<tr class='separation'>
					<td>-------</td>
				</tr>
				<tr style="display:none;">
					<td>deux</td>
				</tr>
			</tbody>
		</table>	
	</div>
	<div class='B'>
		<div>
			<a id="tata" href="#">TATA</a>
		</div>
		<table>
			<tbody>
				<tr>
					<td>un</td>
				</tr>
				<tr class='separation'>
					<td>-------</td>
				</tr>
				<tr>
					<td>deux</td>
				</tr>
			</tbody>
		</table>	
	</div>
</form>

Exemple :

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
// cache les tables du formulaire
$("table", "#formID").hide();
 
// show/hide toto ou tata
$("#toto, #tata").click(function(){
	$(this).parent().next().slideToggle();
	return false;
});
 
// on teste chaque seconde
setInterval(function(){
	$("table", "#formID").each(function(i, item){
		if ( $(item).is(":visible") ){
			var nb = 0;
 
			$("tbody", item).find("tr.separation").each(function(j, jtem){
				nb = 0;
 
				$(jtem).nextAll().each(function(k, ktem){
					if ( $(ktem).is(":visible") ){
						nb++;
						return false;
					}
				});
 
				if (nb == 0){
					$(this).hide();
				}
			});
		}
	});
}, 1000); // 1000 millisecondes = 1s