Afficher / Cacher des div, probleme

Version imprimable

Bonjour,

J'ai créé un petit menu de 3 boutons. En dessous il y a 3 div. En fait j'aimerais afficher seulement la div en fonction du bouton appuyé :

Voici le bout de code utile :

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
<?php
echo"<div id=\"encadre\">";
        echo"<table id=\"tab_menu\">";
                echo"<tr>";
                        echo"<td><a href=\"index.php\" onClick=\"Cacher(\"statut\");\" >Statut</a></td>";
                        echo"<td><a href=\"index.php\" onClick=\"Cacher(\"img\");\" >Images</a></td>";
                        echo"<td><a href=\"index.php\" onClick=\"Cacher(\"video\");\" >Vidéos</a></td>";
                echo"</tr>";
        echo"</table>";
        
        echo"<div id=\"statut\">";      
                echo"<textarea rows=\"2\" cols=\"70\" name=\"sta\" ></textarea>";
        echo"</div>";
        
        echo"<div id=\"img\">"; 
                echo"<iframe src=\"http://www.hostingpics.net/iframe_mini.php\" width=\"400\" height=\"100\" scrolling=\"no\" frameborder=\"0\" allowtransparency=\"true\"></iframe>";
        echo"</div>";
        
        echo"<div id=\"video\">";       
                echo"<input type=\"text\" name=\"video\" />";
                echo"<input type=\"submit\" value=\"Envoyer\" />";
        echo"</div>";   
echo"</div>";
?>

et la fonction JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script language="JavaScript" type="text/javascript" >
	function Cacher(param)
	{
		if(param=="statut")
		{
			document.getElementById("statut").style.display = "block";
			document.getElementById("img").style.display = "none";
			document.getElementById("video").style.display = "none";
		}
		else if(param="img")
		{
			document.getElementById("statut").style.display = "none";
			document.getElementById("img").style.display = "block";
			document.getElementById("video").style.display = "none";
		}
		else if(param="video")
		{
			document.getElementById("statut").style.display = "none";
			document.getElementById("img").style.display = "none";
			document.getElementById("video").style.display = "block";
		}
	}
	</script>

J'ai mis des alert() dans chaque condition pour vérifier que la fonction était bien appelé etc tout niquel.

Le problème est que rien ne s'affiche ou ne se cache. J'utilise le même genre sur une autre page pour afficher / cacher des images, et ca fonctionne. J'ai essayé avec l'outil de debug google chrome mais pas d'erreur JS. Vous avez une idée ?

merci

edit : En fait ca semble disparaitre une fraction de seconde mais tout se réaffiche directement :aie:

Citation:

Envoyé par bob633

Bonjour,

J'ai créé un petit menu de 3 boutons. En dessous il y a 3 div. En fait j'aimerais afficher seulement la div en fonction du bouton appuyé :

Voici le bout de code utile :
...

je te conseil de lire la FAQ PHP
1) on ne mets pas de ?> à la fin du fichier
2) les echo de balise sont inutile et inefficaces
3) les échos de balise html rendent le code confus au point de le rendre inopérant

donc cas ton cas un simple HTML aurait suffit
et tu aurais de suite vu que ton code était foireux

on n'écrit pas

Code:

onClick="Cacher("statut");"

mais

Code:

onClick="Cacher('statut');"

foutre ça dans un echo php est contre performant inutile et surtout tu n'as pas vu le pb car il était noyé dans des \"

Code:

echo "<td><a href=\"index.php\" onClick=\"Cacher(\"statut\");\" >Statut</a></td>";
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div id="encadre"> <table id="tab_menu"> <tr> <td><a href="index.php" onClick="Cacher('statut');" >Statut</a></td> <td><a href="index.php" onClick="Cacher('img');" >Images</a></td> <td><a href="index.php" onClick="Cacher('video');" >Vidéos</a></td> </tr> </table> <div id="statut"> <textarea rows="2" cols="70" name="sta" ></textarea> </div> <div id="img"> <iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe> </div> <div id="video"> <input type="text" name="video" /> <input type="submit" value="Envoyer" /> </div> </div>
A+JYT

Bonjour,
le problème de ton script, c'est qu'en cliquant sur un bouton, on change de page (lien vers index.php).

Voici une solution sur "onmouseover" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript" >
/* initialisation du tableau */
var params = new Array();
params[0] = 'statut';
params[1] = 'img';
params[2] = 'video';
/* on affiche la bonne div sur "onmouseover" */
function Montrer(param)
{
	for(i=0; i<3; i++){
		if(param==params[i]){
			/* on affiche la div concernée */
			document.getElementById(params[i]).style.display = "block";
		} else {
			/* on masque les autres */
			document.getElementById(params[i]).style.display = "none";
		}
	}
};
</script>

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
<div id="encadre">
	<table id="tab_menu" border="1">
		<tr>
			<td onmouseover="Montrer('statut');" >Statut</td>
			<td onmouseover="Montrer('img');" >Images</td>
			<td onmouseover="Montrer('video');" >Vidéos</td>
		</tr>
	</table>
 
	<div id="statut" style="display:none;">	
		<p>statut :</p>
		<textarea rows="2" cols="70" name="sta" ></textarea>
	</div>
 
	<div id="img" style="display:none;">	
		<p>img :</p>
		<iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
	</div>
 
	<div id="video" style="display:none;">	
		<p>video :</p>
		<input type="text" name="video" />
		<input type="submit" value="Envoyer" />
	</div>	
</div>

A noter :
1/ <td onmouseover="Montrer('statut');" >Statut</td>
on peut mettre une commande javascript sur autre chose que des <a...>
2/ <div id="statut" style="display:none;">
sur les 3 div, pour les masquer à l'ouverture de la page.

PS : inutile de mettre le code html dans des balises PHP...

25/02/2012, 11h29
bob633

Merci pour ta réponse.

Au niveau de PHP, c'est plus propre de fermer avec la balise ?> J'ai toujours fait comme ca et ce n'est pas une source d'erreur. Tu n'enclenches pas ton lave vaisselle avant d'avoir fermé la porte. Tu peux mais voilà les fuites ...

Citation:

on n'écrit pas
Code :Sélectionner tout - Visualiser dans une fenêtre à part
onClick="Cacher("statut");"
mais
Code :Sélectionner tout - Visualiser dans une fenêtre à part
onClick="Cacher('statut');"

C'était comme ca au début, mais j'ai tout essayé et poster le code avec les " au lieu de '

Si tout est en PHP, c'est parce que là c'est le code minimaliste, au final beaucoup de php sera mélanger là dedans et j'aime pas ouvrir et fermé 50000 fois les balises <?php ?> au milieu.

Sinon pour revenir, tu n'as pas répondu à mon problème :( Je ne demandais pas des critiques sur ma façon de coder mais plutot la source de l'erreur.

En testant élement par élément, je me rend que c'est l'iframe qui bug. Dans ma fonction, tout ce qui est avant le getElementById('img') fonctionne, après rien ..

J'ai testé visibility = hidden mais ca change rien :(

Des idées ?
25/02/2012, 11h32
bob633

jreaux62 :

En effet du coup j'ai décalé le onclick sur la balise TD à la place. Car le menu est actuellement dans un tableau, mais je le ferais en CSS après.

Je vais testé ta solution.

Pour les balises PHP, j'ai rep dans mon poste précédent =) J'aime pas vraiment mélanger 50 balises PHP au milieu du HTML :s

Merci pour l'aide

Pour continuer, il faut des balise <form> autour des formulaires !

Et si c'est un téléchargement de fichier, il faut :
<form method="post" enctype="multipart/form-data" action="index.php">

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
	<div id="statut" style="display:none;">	
		<p>statut :</p>
		<form method="post" action="index.php">
		<textarea rows="2" cols="70" name="sta" ></textarea>
		</form>
	</div>
 
	<div id="img" style="display:none;">	
		<p>img :</p>
		<iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
	</div>
 
	<div id="video" style="display:none;">	
		<p>vidéo :</p>
		<form method="post" enctype="multipart/form-data" action="index.php">
		<input type="file" name="video" />
		<input type="submit" value="Envoyer" />
		</form>
	</div>

25/02/2012, 11h38
Bovino

Sincèrement, dans les grandes lignes, je trouve la réponse de sekaijin plutôt pertinente.
Au-delà de faire des critiques sur ton code (et qui sont justifiées pour la plupart), il met le doigt sur la cause probable de ton problème : la multiplication des ouvertures et fermetures de quotes liée au fait de mettre inutilement du code HTML dans des echo entraine surement des erreurs d'imbrication.

D'ailleurs, c'est bien pour ça qu'il est précisé dans Les règles incontournables d'utilisation de ce forum qu'il faut poster le code HTML généré et non le code serveur. Vu que JavaScript s'exécute coté client, le code serveur est donc inutile et le code généré permet de voir facilement les erreurs classiques notamment concernant les quotes.

Enfin, pour ce qui est de la génération de HTML dans le code PHP, tu aurais avantage à te pencher sur la syntaxe Heredoc.

Citation:

Envoyé par bob633

Pour les balises PHP, j'ai rep dans mon poste précédent =) J'aime pas vraiment mélanger 50 balises PHP au milieu du HTML

- Comme l'a dit Sekaijin, c'est contre-performant, car du coup, le code html est d'abord interprété par PHP... (ce qui augmente le temps de traitement)
- des codes bien séparés et bien implémentés sont plus clairs à lire et à déboguer.
- Et les \" et autres \' sont source de confusion et d'erreurs.

Mais c'est toi le chef...

Citation:

Envoyé par bob633

Tu n'enclenches pas ton lave vaisselle avant d'avoir fermé la porte.

Pour reprendre ta métaphore :
on ne mélange pas le linge et la vaisselle !
- le linge dans le lave-linge,
- la vaisselle dans le lave-vaisselle ;)

Pour le menu (à looker en CSS):
Code:

1 2 3 4 5 <ul id="tab_menu"> <li id="menu_Statut" onclick="Montrer('statut');" >Statut</li> <li id="menu_Images" onclick="Montrer('img');" >Images</li> <li id="menu_Vidéos" onclick="Montrer('video');" >Vidéos</li> </ul>
(onclick ou onmouseover : au choix)

25/02/2012, 11h54
bob633

Autant pour moi, je vais revoir la conception pour les balises HTML dans le PHP.

Mauvaises habitudes :mrgreen:

Pour la méthodes Bovino, je ne connaissais pas, je testerais ca.

En tout cas, ta solution fonctionne jreaux62. J'ai aussi résolu mon problème avec un switch au lieu du if else if :ccool:

Merci pour vos éclaircissements en tout cas, je changerais mes méthodes.
25/02/2012, 12h38
sekaijin
Citation:

Envoyé par bob633

Merci pour ta réponse.

Au niveau de PHP, c'est plus propre de fermer avec la balise ?> J'ai toujours fait comme ca et ce n'est pas une source d'erreur. Tu n'enclenches pas ton lave vaisselle avant d'avoir fermé la porte. Tu peux mais voilà les fuites ...

Non il est recommandé de ne pas la mettre.
la raison est simple tout ce qui est hors <?php ?> est envoyé au client

alors un script comme
Code:

1 2 3 <?php //mon code php ici ?>
inclus dans
Code:

1 2 3 <php include "le/script/ci/dessus.php"; header('Location: http://www.example.com/');
ne fonctionne pas
la raison le ?> du premier script le caractère invisible après le ?> est envoyé au client avant la redirection
php ne peut alors plus généré de redirection.

Alors ?> est à bannir en fin de fichier

n'utiliser le ?> que s'il est suivit de code html

Lire la FAQ

A+JYT

autre pb dans ton code le return true par defaut du on clic

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="encadre">
  <table id="tab_menu">
    <tr>
      <td><a href="index.php" onClick="Cacher('statut');" >Statut</a></td>
      <td><a href="index.php" onClick="Cacher('img');" >Images</a></td>
      <td><a href="index.php" onClick="Cacher('video');" >Vidéos</a></td>
    </tr>
  </table>
  <div id="statut">
    <textarea rows="2" cols="70" name="sta" ></textarea>
  </div>
  <div id="img">
    <iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
  </div>
  <div id="video">
    <input type="text" name="video" />
    <input type="submit" value="Envoyer" />
  </div>
</div>

lorsque tu fait onClick sur un A Href le script est exécuté puis le lien activé cela est du au fait que par defaut le script retourne true.

ajouter un return false; à la fin de ta fonction cacher

Code:

1
2
3
4
Cacher = function() {
...
return false;
}

et l'utiliser dans le onclick

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div id="encadre">
  <table id="tab_menu">
    <tr>
      <td><a href="index.php" onClick="return Cacher('statut');" >Statut</a></td>
      <td><a href="index.php" onClick="return Cacher('img');" >Images</a></td>
      <td><a href="index.php" onClick="return Cacher('video');" >Vidéos</a></td>
    </tr>
  </table>
  <div id="statut">
    <textarea rows="2" cols="70" name="sta" ></textarea>
  </div>
  <div id="img">
    <iframe src="http://www.hostingpics.net/iframe_mini.php" width="400" height="100" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
  </div>
  <div id="video">
    <input type="text" name="video" />
    <input type="submit" value="Envoyer" />
  </div>
</div>

sinon voici ce qu'il se passe.
tu ouvre index.php qui t'affiche ta page.
tu clique sur un élément et tu vois les div disparaître
le temps que le script s'exécute.
puis le lien est activer
index.php raffiche la page comme à l'origine.

avec le return false

tu ouvre index.php qui t'affiche ta page.
tu clique sur un élément et tu vois les div disparaître
le lien est bloqué donc les divs restent cachés.

A+JYT