Discussion :

[Lideln]

Bonjour,

Je suis nouveau en tout ce qui concerne javascript/php etc.
J'utilise un script javascript (dans un fichier .js que j'inclus) qui permet d'afficher/cacher un élement "div" d'une page html, dans le but de n'afficher le menu de navigation du haut que si l'utilisateur s'est enregistré.

Le script :

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
 
var DHTML = (document.getElementById || document.all || document.layers);
 
function getObj(name)
{
	if (document.getElementById)
	{
		this.obj = document.getElementById(name);
		this.style = document.getElementById(name).style;
	}
	else if (document.all)
	{
		this.obj = document.all[name];
		this.style = document.all[name].style;
	}
}
 
function layerDisp(lyr,flag)
{
	if(!DHTML) return;
	var x = new getObj(lyr);
	x.style.display = (flag)? 'block' : 'none';
}
 
function toggleVisible(lyr)
{
	alert("Appel a toggleVisible");
	if(!DHTML) return;
	alert("etape 1...");
	var x = new getObj(lyr);
	alert("etape 2...");
	var flag = (x.style.display == 'none')? 1 : 0;
	alert("etape 3...");
	layerDisp(lyr,flag);
	alert("etape 4...");
}
 
function maskLayer()
{
	styleCalque("message").display="none";
}

Lorsque j'utilise :

Code :

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

1
2
 
<a class="CLink" href="javascript:toggleVisible('div_menu');" target="_top">TEST DE LA FONCTION</a>

Ca marche impeccablement (j'ai mis des "alert" dans tout mon code javascript pour etre sur).

Par contre, ce que je veux, c'est pas ca ! J'aimerais que ca se fasse automatiquement soit au onLoad de la page HTML si possible, soit que j'appelle ca directement dans le code.

Et voici mes problemes :
1) Si j'appelle au onLoad ou plus loin dans le code, la fonction javascript appelée quitte subitement apres le alert("etape 1...");
J'utilise ce code pour appeler la fonction dans le body du HTML :

Code :

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

1
2
 
<script type="text/JavaScript">toggleVisible('div_menu');</script>

2) Avec ce code, la fonction est appelée 2 fois
Tandis que si j'utilise :

Code :

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

1
2
 
<script language="javascript">toggleVisible('div_menu');</script>

Ca ne l'affiche qu'une fois (mais bon ca marche pas quand meme ! lol)

Voilà, si quelqu'un peut me dire comment appeler cette fonction directement dans le body du HTML (sans passer par un clic sur un lien), et si quelqu'un peut me dire pourquoi ca ne marche qu'avec un clic et pourquoi ca plante avec un appel direct....

Merci beaucoup de votre aide

Lideln

[Lideln]

*bump*

[sekaijin]

moi j'aurais fais :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function toggleVisible(lyr) {
   try {
      myDiv = document.getElementById(lyr);
      if (myDiv) {
         if (myDiv.style.display == 'none') {
            myDiv.style.display == 'block';
         } else {
            myDiv.style.display == 'none';
         }
      }
   } catch e {
   }
   return false;
}

je ne ferais pas d'appel dans le onLoad car il suffit de mettre la bonne valeur initiale dans le dic lui même ou dans la feuille de style

et enfin sur le a href

Code :

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

<a class="CLink" href="?" onclick="return toggleVisible('div_menu');">TEST DE LA FONCTION</a>

ECMAScript est le seul élément qui soit suporté à 100% par tous les navigateur sauf la fonction sleep qui pose un pb à IE sinon tout le reste est supporté.

je trouve ton code bien compliqué pour si peu.
A+JYT
PS: je n'ai pas testé mon code mais c'est en général le principe que j'adopte.

[Lideln]

Sekaijin,

Merci pour ta réponse. Par contre ca m'aide pas beaucoup !

je ne ferais pas d'appel dans le onLoad car il suffit de mettre la bonne valeur initiale dans le dic lui même ou dans la feuille de style

Si ca avait été si simple tu crois vraiment que je me serais pris la tete ?
J'ai une valeur par défaut pour cette barre (caché), et quand je me connecte il faut que je CHANGE cette valeur, mais cette barre n'est pas dans le fichier php depuis lequel j'appelle la fonction.

Pour le href mon code marche déjà très bien, merci tout de même.

Ma question reposait sur l'appel DIRECT de la fonction, comme une ligne de code banale, SANS passer par un clic sur un lien.

Je me demandais ce que ca pouvait bien changer entre ces deux méthodes (clic sur un lien et appel direct dans le code) pour que ca marche pour l'un (clic) et pas pour l'autre (appel direct).

Ce soir j'essaierai en effet avec un try catch, peut etre que ca me montrera l'erreur, mais je pige toujours pas la différence entre ces deux appels qui fait que ca marche ou que ca crash.

Si quelqu'un a la réponse...

PS : ce code n'est pas de moi, je débute en javascript c'est la 1ere fois que j'en vois...

[Auteur]

bonjour,

j'ai testé ton code sous IE et Firefox, je n'ai pas de souci. J'ai testé avec le lien puis avec le onload, le menu s'affiche.
-N'as-tu pas fait une erreur lors de l'appel ?

Code :

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

1
2
 
<body onload="toggleVisible('div_menu')">

-un détail qui peut avoir son importance. Tu utilises dans ton code style.display="valeur". Pour éviter des problèmes d'affichage, il faut que ce style soit déclaré dans la balise div et non dans le CSS.

Code :

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

1
2
 
<div id="div_menu" style="display: none">

-pour la balise script préfère cette syntaxe (avec ou sans les balises commentaires) :

Code :

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

1
2
3
4
5
6
7
 
<script type="text/javascript">
<!--
 
 
//-->
</script>

-si tu veux appeler ta fonction dans le body de ta page écris ceci :

Code :

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

1
2
3
4
 
<script type="text/javascript">
toggleVisible('div_menu')
</script>

Mais il faut placer cette ligne d'appel après ta balise div : il faut d'abord charger le div avant d'appeler la fonction, sinon le script plante.

[Lideln]

Hello Auteur !

Merci pour cette réponse vraiment complète !
Je n'ai pas mon code sous les yeux car je suis au bureau là (stage de fin d'études).

Pour éviter des problèmes d'affichage, il faut que ce style soit déclaré dans la balise div et non dans le CSS.

C'est bien le cas, je l'initialise dans le fichier php, à "none".

Merci pour les conseils d'appel de la fonction, je vais tester ca en rentrant et je te dirai.
Par contre pour

Mais il faut placer cette ligne d'appel après ta balise div : il faut d'abord charger le div avant d'appeler la fonction, sinon le script plante.

Peut être que mon problème vient de là ?

Je m'explique :
j'ai un fichier index.php, dans lequel j'ai 3 iframes. La 1ere contient le menu du haut, placé dans une balise div (le fameux div_menu) et initialisé à : invisible.
J'ai un autre iframe pour le menu de gauche (initialisé avec menu_gauche.php) et un autre encore pour le container.

J'arrive sous index.php, en mode visiteur. Je peux me connecter grace au menu de gauche. Quand je le fais et que ca marche, le menu de gauche est remplacé par une autre page php : menu_gauche_connected.php (oui, je me suis pas embêté pour les noms lol)

Et c'est dans ce fichier php que je souhaite appeler la fonction d'affichage du div. Alors est ce que le div (contenu dans index.php) n'est accessible QUE apres avoir fini de parcourir ce fichier (menu_gauche_connected.php) ? Car quand je clic sur le lien (la page a donc fini de charger) ca marche, mais si je mets l'appel a la fonction dans le code, ca ne marche pas, ca plante apres l'appel a getElementByID.

Si tu as une idée pour comment bypasser ce probleme, je t'en serais tres reconnaissant.

Merci,

Lideln

[Lideln]

Bon alors je vais résumer la situation, car j'ai de nouveaux éléments :

J'ai une page index.php qui contient 3 iframe.
* 1er iframe : contient un <div> dont l'ID est "div_menu". Ce div contient le menu du haut, accessible seulement en mode connecté (c'est a dire qu'il est caché par défaut, avec style="display:none")
* 2eme iframe : contient une page par défaut : menu_gauche.php, qui permet de s'identifier ou de commencer une nouvelle inscription.
* 3eme iframe : container pour les différentes pages de données

Lorsque l'on s'identifie, la page menu_gauche.php est remplacée par menu_gauche_connected.php.
De plus, lors de l'affichage de cette page de menu, j'aimerais appeler la fonction qui affiche le div d'ID div_menu.
Cette fonction s'appelle toggleVisible(name) et se trouve dans un fichier .js.

Le résultat de mes tests, et avec l'aide des forumers :

Si j'appelle cette fonction lors du clic sur un lien, ca marche impeccable.
Si j'appelle cette fonction dans le body de la page php appelante (menu_gauche.php) ou meme celle chargée (menu_gauche_connected.php), l'élément n'est pas trouvé !

Voici le code de mon script (simplifié grace a Sekaijin) :

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
 
function toggleVisible(name)
{
	alert("Appel a toggleVisible");
	myDiv = document.getElementById(name)
	if (!myDiv)
	{
		alert("Element introuvable !");
		myDiv = document.all[name];
	}
	if (myDiv)
	{
		if (myDiv.style.display == 'none')
		{
			myDiv.style.display = 'block';
		}
		else
		{
			myDiv.style.display = 'none';
		}
	}
	else
	{
		alert("Element introuvable 2 !");
	}
}

Voilà, donc j'en déduis que s'il ne trouve pas l'élément lors de l'appel direct dans body, c'est parcequ'il n'a pas fini de "créer" sa table d'éléments, et que si ca marche lors d'un clic sur un lien c'est parceque tous les éléments ont été analysés ?

Si oui, comment faire s'il vous plait.... ?
(vu que ca ne marche pas non plus lorsque je valide mes infos de connexion...)

Merci de votre aide,

Lideln

[Auteur]

Je voudrais quelques éclaircissements :

-dans ton premier message :

Code :

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

1
2
 
<a class="CLink" href="javascript:toggleVisible('div_menu');" target="_top">TEST DE LA FONCTION</a>

le target="_top" m'intrigue...

-tu utilise des iframe. As-tu organisé ta page index.php de cette manière (en gros ):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<html>
<head>
<title></title>
</head>
 
<body>
<iframe src="menu_haut.htm"></iframe>
<iframe src="menu_gauche.php.htm"></iframe>
<iframe src="container.htm"></iframe>
 
</body>
 
</html>

[Lideln]

Hello !

Merci d'etre encore là

Pour le lien, je sais pas pourquoi j'ai mis target="_top", ya aucune raison, ca doit etre un copier coller d'une autre page, mais ca n'a aucun but précis lol

Pour mon index.php, j'ai ca : (en gros)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>
  <table>
    <tr><td><div id="div_menu" style="display:none;">
      <iframe menu haut etc etc></iframe>
    </div></td></tr>
    <tr><td><div id="div_menu_gauche" style="display:block;">
      <iframe menu_gauche bla bla></iframe>
    </td><td><iframe container blabla></iframe>
    </td></tr>
  </table>
</body>

Voilà pour résumer

Vois tu une explication à cette histoire ?

Merci de ton aide en tous cas

Lideln

ps : je vais essayer de changer 2 ou 3 choses voir comment ca évolue...

[Auteur]

je comprends mieux ton projet.

Lorsque l'on s'identifie, la page menu_gauche.php est remplacée par menu_gauche_connected.php.
De plus, lors de l'affichage de cette page de menu, j'aimerais appeler la fonction qui affiche le div d'ID div_menu.
Cette fonction s'appelle toggleVisible(name) et se trouve dans un fichier .js.

si je comprends bien la ligne d'appel de toggleVisible() se trouve dans menu_gauche_connected.php.

Quand tu écris dans menu_gauche_connected.php

Code :

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

1
2
 
myDiv = document.getElementById(name)

cela sous-entend que l'objet name se trouve dans menu_gauche_connected.php ce qui n'est pas le cas. L'objet se trouve dans index.php.

Pour préciser que name se trouve dans index.php (fenêtre parent) écris :

Code :

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

1
2
 
	myDiv = window.parent.document.getElementById(name);

-----------------------

Si j'appelle cette fonction lors du clic sur un lien, ca marche impeccable.

parce-ce que ton lien se trouve dans index.php tout comme l'objet name.

Si j'appelle cette fonction dans le body de la page php appelante (menu_gauche.php) ou meme celle chargée (menu_gauche_connected.php), l'élément n'est pas trouvé !

car l'élément se trouve dans la fenêtre parent et la ligne d'appel dans le frame (cf. explications données plus haut)

[Lideln]

Hello Auteur !

Merci encore pour la réponse ! Voici la mienne :

si je comprends bien la ligne d'appel de toggleVisible() se trouve dans menu_gauche_connected.php.

En effet car je pense que c'est la seule page php à "savoir" que l'on peut maintenant accéder au menu... Enfin bon dans tous les cas je pense que c'est plus logique de la mettre dans menu_gauche_connected.php

cela sous-entend que l'objet name se trouve dans menu_gauche_connected.php ce qui n'est pas le cas. L'objet se trouve dans index.php.

Pour préciser que name se trouve dans index.php (fenêtre parent) écris :
Code :

myDiv = window.parent.document.getElementById(name);

Alors CA c'est quelque chose qui me donne espoir
Commençant tout juste javascript, ce genre de subtilités m'échappe encore...

Par contre voilà qui me donne moins l'espoit :

parce-ce que ton lien se trouve dans index.php tout comme l'objet name.

Ben non.... Le lien se trouve BIEN dans menu_gauche_connected.php...

Mais bon, je vais quand meme essayer ton code avec window.parent ce soir car ca me parait plein de bonnes choses... Mais par contre...
Comme mon code qui fait getElementById se trouve dans un script (que j'ai mis dans mon post précédent), il faudra donc que, si l'élément n'est pas trouvé, je fasse un autre test mais avec cette fois window.parent.document au lieu de document tout court ?

Merci pour ces infos, je sens que ca va marcher heheheeee

[Auteur]

Mais bon, je vais quand meme essayer ton code avec window.parent ce soir car ca me parait plein de bonnes choses... Mais par contre...
Comme mon code qui fait getElementById se trouve dans un script (que j'ai mis dans mon post précédent), il faudra donc que, si l'élément n'est pas trouvé, je fasse un autre test mais avec cette fois window.parent.document au lieu de document tout court ?

non.
Change juste l'affectation de myDiv.
myDiv = window.parent.document.getElementById(name);
D'après ton script, ton test est réalisé sur myDiv (qui reçoit le résultat de document....) et non sur document.

-----------------
Pour savoir ce que contient myDiv ajoute dans ton code alert(myDiv); juste après l'affectation.
-Si tu vois null (ce n'est pas une chaine de caractères, c'est considéré comme un nombre) : ton objet n'existe pas.
-Si tu vois "HTML object" (l'affichage vaire selon les navigateurs), ton objet existe.

[Lideln]

Oui en effet c'est tout a fait ca.
Je teste ce soir et j'espere que je pourrai enfin mettre ce topic en résolu (en espérant que ca aidera des gens, mais le titre du topic n'a pas grand chose a voir avec le probleme réel...)

Merci encore pour ton aide

Lideln

[Lideln]

Arf Auteur à l'aide !!

J'ai testé, même avec myDiv = window.parent.document.getElementById[name]; il trouve pas Mais ca doit bien être possible de récupérer un élément d'une manière ou d'une autre non ?

Je vais encore faire des tests mais ca commence vraiment a me courir sur le haricot....

EDIT : je viens de tester en affichant le titre du document dans lequel on cherche l'élément... C'est le BON document !
Bon dieu mais pourquoi s'il trouve le bon document ne veut il pas afficher cette saleté de div ?

[Auteur]

ce petit projet fonctionne. Peut-être qu'il te permettra de comprendre le bug.
Je me suis basé sur ce que tu as écrit plus haut (message 7). Donc je pense que ton projet est organisé de la même manière (certes ce code n'est pas du php, mais je pense que le client obtient quelque chose comme ça).

Fais un copier-coller des différents codes, crée les fichiers et lance index.htm

index.htm :

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
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
table {width: 100%}
table, tr, td{ border: 1px #AAAAAA solid;}
iframe {width: 100%;}
//-->
</style>
 
</head>
 
<body>
<table>
    <tr>
    <td colspan="2">
    <div id="div_menu" style="display:none;">
      <iframe src="menu_haut.htm"></iframe>
    </div>
    </td>
    </tr>
    <tr>
    <td>
    <div id="div_menu_gauche" style="display:block;">
      <iframe src="menu_gauche.htm"></iframe>
    </td>
    <td>
    <iframe src="container.htm"></iframe>
    </td>
    </tr>
  </table>
</body>
 
</html>

menu_gauche.htm
Tape "test" dans la boite de dialogue et clique sur le bouton. Tu appelles ainsi
"menu_gauche_connect.htm"

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function TestNom()
{
 if (document.getElementById("idNom").value=="test")
 {
    window.location.href="menu_gauche_connect.htm"
 }
}
//-->
</script>
</head>
 
<body>
Tapez "test" dans la boite de dialogue :<br>
<input type="text" value="" id="idNom" size="20">
<input type="button" value="Bouton" id="BNom" onclick="TestNom()">
 
</body>
 
</html>

menu_gauche_connect.htm
Lors du chargement de la page (onload="") tu appelles la fonction toggleVisible() et ton div menu_haut devient visible.

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript">
<!--
function toggleVisible(name)
{
	alert("Appel a toggleVisible");
	myDiv = window.parent.document.getElementById(name)
	if (!myDiv)
	{
		alert("Element introuvable !");
		myDiv = document.all[name];
	}
	if (myDiv)
	{
		if (myDiv.style.display == 'none')
		{
			myDiv.style.display = 'block';
		}
		else
		{
			myDiv.style.display = 'none';
		}
	}
	else
	{
		alert("Element introuvable 2 !");
	}
}
 
//-->
</script>
 
</head>
 
<body onload="toggleVisible('div_menu')">
<h1>connecté</h1>
 
 
</body>
 
</html>

container.htm

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
<head>
<title></title>
</head>
<body>
<h1>Container</h1>
</body>
</html>

menu_haut.htm

Code :

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

1
2
3
4
5
6
7
8
9
 
<html>
<head>
<title></title>
</head>
<body>
<h1>menu haut</h1>
</body>
</html>

[Lideln]

Auteur t'es un dieu, tout simplement !

Ce que tu m'as donné comme code est exactement la même architecture que ce que j'ai moi, au poil près

Par contre en testant ton code j'ai tout de suite vu ce qui n'a pas marché.
J'utilise ce code : ...

Code :

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

1
2
 
<script language="JavaScript" type="text/javascript" src="expand_collapse.js"></script>

... pour inclure la fonction toggleVisible() dans menu_gauche_connected.php (ca prend moins de place )

MAIS, en mettant directement la fonction dans le fichier php, ca marche !

C'est à n'y rien comprendre... Le script .js contenant la fonction est bien appelé de toutes facons, mais dans le 1er cas (mon code) il ne trouve pas l'élément. Dans l'autre cas (ton code : mettre directement la fonction dans le script appelant), il trouve l'élément !

Grace a toi j'ai maintenant ce que je voulais, donc ca me remotive pour bosser lol
Mais n'y a t il pas un moyen pour obtenir que ca marche meme depuis l'intérieur du script .js ?

Merci infiniment en tous cas pour cette réponse !

Si tu as la réponse à ma dernière question, je suis aussi preneur, ne serait ce que pour ma culture perso

Merci encore,

Lideln

[Auteur]

Code :

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

Auteur t'es un dieu, tout simplement !

je le savais

C'est à n'y rien comprendre... Le script .js contenant la fonction est bien appelé de toutes facons, mais dans le 1er cas (mon code) il ne trouve pas l'élément. Dans l'autre cas (ton code : mettre directement la fonction dans le script appelant), il trouve l'élément !

c'est curieux comme comportement.
J'ai fait également un script externe pour voir. Et ça marche. Donc je ne comprends pas trop. Tes balises script sont bien dans le head ?

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
 
<html>
<head>
<title></title>
 
<script type="text/javascript" src="MonScript.js"></script>
 
</head>
 
<body onload="toggleVisible('div_menu')">
 
..................
 
</body>
 
</html>

Essaye en supprimant language="JavaScript" dans le lien (je n'y crois pas trop mais bon) :

Code :

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

1
2
 
<script type="text/javascript" src="expand_collapse.js"></script>

[Lideln]

Auteur,

Merci, j'ai enfin trouvé le problème !
Mon code (FAUX) :

Code :

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

1
2
myDiv = window.parent.document.getElementById[name];

J'avais bêtement fait un copier coller de :

Code :

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

1
2
 
myDiv = document.all[name];

Et évidemment ça ne signale pas d'erreur de syntaxe dans le script mais par contre ça marche pas, sans rien dire

Donc now ça marche avec l'appel au script externe (en remplaçant les crochets par des parenthèses.....)
Je te remercie infiniment de tout ton aide Auteur, je vais pouvoir continuer à bosser

(je vais essayer de trouver un outil qui vérifie les scripts, un analyseur syntaxique par exemple, ca pourrait être utile )

Merci encore, à bientot !

Lideln

[Auteur]

Merci, j'ai enfin trouvé le problème !
Mon code (FAUX) :
Code :

myDiv = window.parent.document.getElementById[name];

l'erreur qui rend dingue...

[Lideln]

Oui en effet lol ^^
Comme je l'ai dit je suis tout nouveau en développement web, mais vraiment je regrette déjà les bons vieux compilateurs

Merci encore pour ton aide Auteur !

Lideln