formulaire - ligne de délimitation - show/hide [Résolu]

[erox44]

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

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

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]

Bonsoir

Pour :

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

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

[erox44]

Ok, par contre le setInterval à la longue , ca risque pas de faire ralentir les traitements / planter IE ?

[danielhagnoul]

Bonjour

Pour un seul setInterval avec un temps égal ou supérieur à la seconde, il ne devrait pas y avoir de problème.

[erox44]

ok très bien merci.