show_hide un div: problème avec retour

**-DeN-** · 17/02/2006, 10h56

Bonjour!

Un second petit problème JS, qui n'en est pas vraiment un. Je m'explique: j'aimerais afficher/cacher un bout de formulaire avec JS avec un checkbox.

Facile, tout marche nickel SAUF sous IE lorsque je fais "retour". Voici les éléments clés:
Ma fonction (que j'appelle avec le checkbox)

Code :

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

1
2
3
4
5
6
7
function show_hide(layer) {
	layer = document.getElementById(layer);
	if(document.getElementById('address').checked ) {
		layer.style.display = "block";
	}else{
		layer.style.display = "none";
	}

et en bas de page (pour afficher/cacher au chargement) [pas d'accès au tag body onload...]

Code :

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

1
2
3
4
5
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE THE SCRIPT FROM OTHER BROWSERS
show_hide('div_address');
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

Avec FF ça passe nickel, mais avec IE un "retour" me cache le DIV! (même si la checkbox est cochée (et le reste après le retour)

Et en fait si j'ai:

Code :

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

1
2
3
4
<script for=window event=onload language="JScript">
  show_hide('div_address');
</script>
ça passe,

mais c'est pas une solution très sexy il me semble (EDIT: surtout que ça cause des problèmes sur ma page

plus marche pas avec Netscape)

**denisC** · 17/02/2006, 11h37

Envoyé par -DeN-

Avec FF ça passe nickel, mais avec IE un "retour" me cache le DIV! (même si la checkbox est cochée (et le reste après le retour)

Qu'est ce que tu appelles un retour????

Sinon, pour définir le fait que les champs sont cachés par défaut, je conseille de le mettre directement dans le style de ton div:

Code :

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

1
2
 
<div id='...' style='display:none'>

Et tant pis pour les gens qui ont désactivé le Javascript.

Sinon, tu peux attacher l'évenement à la page de façon propre avec attachEvent/addEventListener.
Enfin, tu peux utiliser la propriété defer de IE (attribut à mettre dans ta balise script) pour que le script ne soit initialisé qu'après le chargement complet de la page).

Mais la première solution est la meilleure

**-DeN-** · 17/02/2006, 11h41

super plein d'éléments de réponse, je vais étudier ça de suite.

Par retour j'entend:

Soit un clic sur bouton IE "retour" (flèche)
soit un clic sur le lien: echo <a href=\"javascript:history.back();\"><img src=\"template/bouton_back.jpg\" border=\"0\" alt=\"back\"></a>";

Je vais voir de suite ces solutions. IE emmerde car avec Netscape 7,8,FF ça marche nickel.

EDIT: en ce qui concerne la première solution, c'est déjà comme ça. Le problème survient que si: l'utilisateur check la box, fait "suite" puis "back". La checkbox est activée MAIS le div est caché!

**-DeN-** · 17/02/2006, 12h00

Code :

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

1
2
3
4
5
<SCRIPT LANGUAGE="JavaScript" defer="defer">
<!-- HIDE THE SCRIPT FROM OTHER BROWSERS
show_hide('div_address');
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>

Marche pas malheureusement. Pourtant ça semblait la solution idéale...

**-DeN-** · 17/02/2006, 12h16

Voilà j'ai créé un simple page HTML de test, qui résume ce que fait ma page. Sous Firefox ça marche du tonerre, sous IE ça merde. Vous pouvez copier-coller pour tester...

Merci bcp pour votre aide!

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
<html>
<head>
<title>test</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE THE SCRIPT FROM OTHER BROWSERS
function show_hide(layer) {
	layer = document.getElementById(layer);
	if(document.getElementById('address').checked) {
		layer.style.display = "block";
	}else{
		layer.style.display = "none";
	}
}
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
 
<form action="do_back" method="post" enctype="" name="frmshop">
test0 
<input class="checkbox" name="address" type="checkbox" id="address" onClick="show_hide('div_address');">
<input type="submit" name="Submit" value="test" />
<div id="div_address" style="display:none">
test1
</div>
</form>
 
<SCRIPT LANGUAGE="JavaScript">
<!-- HIDE THE SCRIPT FROM OTHER BROWSERS
show_hide('div_address');
// STOP HIDING FROM OTHER BROWSERS -->
</SCRIPT>
 
</body>
</html>

show_hide un div: problème avec retour

JavaScript

Discussions similaires

Partager

Partager