Afficher/masquer balise <div></div>

**cUs3Mp** · 17/12/2008, 15h08

si je met ma balise select a "display:none" elle ne s'affiche pas. ->ok
si je veux que le select + le texte en face ne s'affiche pas que devrais-je mettre autour ?
j'ai essayé <div> mais ne semble pas réagir au "display:none"

si je met dans un tableau ca reagit bien mais ca fout en l air la presentation de la page.

autre detail : au lieu de faire :
onchange="showhide(document.getElementById("budjetop"));"

cela ne serait pas mieux ? :
onchange="showhide("budjetop");"

j'ai essayé les \" et \' mais rien n'y fait.... snif

personne pour proposer une astuce ?

Envoyé par ThomasR

Re,

Il y a un bout de code inutile (et qui fait planter JS) qui traine dans la fonction Javascript :

Code :

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

1
2
3
4
 
<?php
printf('function SHOWHIDE');
?>

Concernant ton erreur précédente, en fait il faut échapper les guillemets entourant budjetop car sinon cela coupe la chaine de l'attribut onchange.
Remplace :

Code :

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

onchange="showhide(document.getElementById("budjetop"));"

par

Code :

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

1
2
 
onchange="showhide(document.getElementById(\'budjetop\'));"

il faut bien que j'ai un retour
sinnon comment je sais si la fonction s'execute? elle peut s'executer et ne pas produire de resultat j'en saurais rien ..

personne saurait comment trouver un déboggeur php ?

**ThomasR** · 17/12/2008, 16h23

autre detail : au lieu de faire :
onchange="showhide(document.getElementById("budjetop"));"

cela ne serait pas mieux ? :
onchange="showhide("budjetop");"

Les deux codes sont différents et ne font pas la meme chose, dans le premier cas, un objet est envoyé au paramètre de la fonction showhide, dans le second c'est une chaine de caractères correspondant à l'id de l'élément à montrer/cacher.

La fonction Javascript que tu utilies attends en paramètre une valeur de type objet.

**cUs3Mp** · 17/12/2008, 16h26

c'est bon j'ai débuggué a l arache, mes listes s'affichent et se cachent successivement suite au changement de celle qui précéde chacune !!

YEPEEE

Merci a ThomasR Rolleis Dayllira

maintenant j'ai plu qu'a trouver comment afficher/masquer non plus le select mais tout un bloc contenant le text + le select

la je sais que les balises <div> ne serviront a rien si quelqu'un sait quels seraient les balises apropriées.

**ThomasR** · 17/12/2008, 16h37

Les balises <div/> sont les plus appropriées, elles représentent des divisions, des blocs.

Si cela ne marche pas c'est que tu as dû faire une erreur.

Code :

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

1
2
3
4
<a href="#" onclick="showhide(document.getElementById('div_main'));return false;">Afficher le DIV</a>
<div id="div_main">
    CONTENU DE DIV_MAIN
</div>

**cUs3Mp** · 17/12/2008, 16h41

ouasi mais pourquoi : a href ?

je met mes textes et mes select dans une div a laquelle je donne un id.

j'utilise cet id en paramétre dans ma fonction

si ca fout en l air la presentation (taille et police) il faut que je rajoute une entrée dans mon css ???

Donc j'utilise quand méme les <div>

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
46
47
48
49
 
<tr>
            <td class="ligne_sep_coord2" colspan="3"></td>
          </tr>
          <tr>
            <td class="intitule_coord"><p>Objet de la demande&nbsp;:</p></td>
            <td class="chps_long_coord">
			<select id="objet" name="objet"  class="chps_long_form" onchange="showhide(document.getElementById(\'moreinfo\'));">
					' . $Form->Select_General($objet, 'objet', '', '', 'id') . '
					</select>
			</td>
            <td class="alerte_form"></td>
          </tr>
		  <tr>
		  <div id="moreinfo" style="display:none;">
 
							<td class="ligne_sep_coord2" colspan="3"></td>
						    </tr>
						    <tr>
							<td class="intitule_coord"><p>Type d operation&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="optype" name="optype"  class="chps_long_form"  >
									' . $Form->Select_General($optype, 'optype', '', '', 'id','') . '
									</select>
							</td>
							</tr>
							<tr>
							<td class="ligne_sep_coord2" colspan="3"></td>
							</tr>
							<tr>
							<td class="intitule_coord"><p>Prix par cadeau&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="prixcadeau" name="prixcadeau"  class="chps_long_form" >
									' . $Form->Select_General($prixcadeau, 'prixcadeau', '', '', 'id','') . '
									</select>
							</td>
							</tr>
							<tr>
							<td class="ligne_sep_coord2" colspan="3"></td>
						    </tr>
						    <tr>
							<td class="intitule_coord"><p>Budjet de l operation&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="budjetop" name="budjetop"  class="chps_long_form" >
									' . $Form->Select_General($budjetop, 'budjetop', '', '', 'id','') . '
									</select>
							</td>
							</tr>
		  </div>

Le seul souci c'est que tout le bloc dans le div s'affiche (je veux pas qu'il saffiche tant qu'on selectionne pas dans la liste)

et mon style n'est plus du tout pris en compte dans le form.

**ThomasR** · 17/12/2008, 16h54

Ce que je te donne c'est un exemple...

Encore une fois, si tu utilises cette fonction :

Code :

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

1
2
3
4
 
function showhide(element){
    element.style.display = (element.style.display == 'none') ? 'block' : 'none'; 
}

ce n'est pas l'id qu'il faut passer en paramètre mais l'élément, c'est donc pour cela que le paramètre est document.getElementById('divId'), cette fonction renvoie un objet.

Pour info, ton <div/> est dans un <tr/> alors qu'il devrait se trouver dans une cellule <td/>.

Je ne pourrais malheureusement pas m'étaler davantage sur le sujet.

**cUs3Mp** · 17/12/2008, 16h58

Mais c'est exactement ce que je fais je lui passe l'objet "moreinfo" qui est le div contenant les champs à afficher

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
<select id="objet" name="objet"  class="chps_long_form" onchange="showhide(document.getElementById(\'moreinfo\'));">
					' . $Form->Select_General($objet, 'objet', '', '', 'id') . '
					</select>
			</td>
            <td class="alerte_form"></td>
          </tr>
		  <tr>
		  <div id="moreinfo" style="display:none";>
 
							<td class="ligne_sep_coord2" colspan="3"></td>
						    </tr>
						    <tr>
							<td class="intitule_coord"><p>Type d operation&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="optype" name="optype"  class="chps_long_form"  >
									' . $Form->Select_General($optype, 'optype', '', '', 'id','') . '
									</select>
							</td>
							</tr>
							<tr>
							<td class="ligne_sep_coord2" colspan="3"></td>
							</tr>
							<tr>
							<td class="intitule_coord"><p>Prix par cadeau&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="prixcadeau" name="prixcadeau"  class="chps_long_form" >
									' . $Form->Select_General($prixcadeau, 'prixcadeau', '', '', 'id','') . '
									</select>
							</td>
							</tr>
							<tr>
							<td class="ligne_sep_coord2" colspan="3"></td>
						    </tr>
						    <tr>
							<td class="intitule_coord"><p>Budjet de l operation&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="budjetop" name="budjetop"  class="chps_long_form" >
									' . $Form->Select_General($budjetop, 'budjetop', '', '', 'id','') . '
									</select>
							</td>
							</tr>
		  </div>

**ThomasR** · 17/12/2008, 17h03

Le ";" après style="display:none" est inutile et est probablement la source de l'erreur. La synthaxe correcte est :

Code :

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

<div id="moreinfo" style="display:none;">

De plus, la balise <div/> n'est pas autorisé dans un <tr/>, mais dans un <td/>, oui.

**cUs3Mp** · 17/12/2008, 17h18

ca je l'ai déja corrigé

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
 <tr>
            <td class="intitule_coord"><p>Objet de la demande&nbsp;:</p></td>
            <td class="chps_long_coord">
			<select id="objet" name="objet"  class="chps_long_form" onchange="showhide(document.getElementById(\'moreinfo\'));">
					' . $Form->Select_General($objet, 'objet', '', '', 'id') . '
					</select>
			</td>
            <td class="alerte_form"></td>
          </tr>
		  <tr>
		  <div id="moreinfo" style="display:none;">
 
							<td class="ligne_sep_coord2" colspan="3"></td>
						    </tr>
						    <tr>
							<td class="intitule_coord"><p>Type d operation&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="optype" name="optype"  class="chps_long_form"  >
									' . $Form->Select_General($optype, 'optype', '', '', 'id','') . '
									</select>
							</td>
							</tr>
							<tr>
							<td class="ligne_sep_coord2" colspan="3"></td>
							</tr>
							<tr>
							<td class="intitule_coord"><p>Prix par cadeau&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="prixcadeau" name="prixcadeau"  class="chps_long_form" >
									' . $Form->Select_General($prixcadeau, 'prixcadeau', '', '', 'id','') . '
									</select>
							</td>
							</tr>
							<tr>
							<td class="ligne_sep_coord2" colspan="3"></td>
						    </tr>
						    <tr>
							<td class="intitule_coord"><p>Budjet de l operation&nbsp;:</p></td>
							<td class="chps_long_coord">
							<select id="budjetop" name="budjetop"  class="chps_long_form" >
									' . $Form->Select_General($budjetop, 'budjetop', '', '', 'id','') . '
									</select>
							</td>
							</tr>
		  </div>

mais mon bloc <div> est affiché avec tout ses champs au chargement de la page.
alors qu'il est a la base definit avec display:none;

donc le souci n'est pas la....

admetons
dans le div j'ai texte et select soit plusieurs autres balises imbriqués si je raisonne logiquement en metant mon div "moreinfo" a disply none c'est tout le contenu qui ne doit pas s'afficher ...

si je met le display none aux select en effet ca marche, ils ne s'affichent pas.

comment gerer tout les 3 selects d'un coup ?
je précise comme on le voit dans le source entier plus haut que dans mon formulaire j'ai un tableau et qu'a chaque texte ou input correspond une autre cas/colonne d'ou toutes ces balis TR et TD qu'on voit partout, je sais pas si c'est ca qui bloque, mais il semble qu'on arrive a cacher le contenu dans une case mais pas un balise s'etendant sur plusieurs colonnes ou cases ...

et si mon formulaire est un ennorme tableau

je peux pas placer mes div pour qu'elles concernent plusieures cases du tableau ?

si je peux pas ca veut dire que je peux que afficher/cacher ce qui est entre <TD> et </TD> ?

je crois que dans ce cas mon code va devenire une vraie uzine à gaz ....

suis - je obliger d'ouvrire et de fermer un nouveau <div> à chaque <td> ?????

aidez moi s'il vous plait

**ThomasR** · 17/12/2008, 18h49

Bonsoir cUs3Mp,

Pas de panique

et si mon formulaire est un ennorme tableau
je peux pas placer mes div pour qu'elles concernent plusieures cases du tableau ? Si je peux pas ca veut dire que je peux que afficher/cacher ce qui est entre <TD> et </TD> ?
je crois que dans ce cas mon code va devenire une vraie uzine à gaz ....
suis - je obliger d'ouvrire et de fermer un nouveau <div> à chaque <td>

Le fait que tu aies adopté une structure en tableau te complique un peu la tâche (un peu). En fait la solution est de créer un sous tableau pour le reste du formulaire que tu veux cacher, mettre le <div id="moreinfo"/> dans une cellule qui s'étend sur les 3 colonnes de la ligne, puis mettre le sous tableau que tu viens de créer dans le <div id="moreinfo"/>, un peu comme ceci :

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
46
47
48
49
50
51
 
<tr>
            <td class="intitule_coord"><p>Objet de la demande&nbsp;:</p></td>
            <td class="chps_long_coord">
      <select id="objet" name="objet"  class="chps_long_form" onchange="showhide(document.getElementById(\'moreinfo\'));">
          ' . $Form->Select_General($objet, 'objet', '', '', 'id') . '
          </select>
      </td>
            <td class="alerte_form"></td>
          </tr>
      <tr>
      <td colspan="3">
      <div id="moreinfo" style="display:none;">
             <table>
             <tr>
              <td class="ligne_sep_coord2" colspan="3"></td>
                </tr>
                <tr>
              <td class="intitule_coord"><p>Type d operation&nbsp;:</p></td>
              <td class="chps_long_coord">
              <select id="optype" name="optype"  class="chps_long_form">
                  ' . $Form->Select_General($optype, 'optype', '', '', 'id','') . '
                  </select>
              </td>
              </tr>
              <tr>
              <td class="ligne_sep_coord2" colspan="3"></td>
              </tr>
              <tr>
              <td class="intitule_coord"><p>Prix par cadeau&nbsp;:</p></td>
              <td class="chps_long_coord">
              <select id="prixcadeau" name="prixcadeau"  class="chps_long_form" >
                  ' . $Form->Select_General($prixcadeau, 'prixcadeau', '', '', 'id','') . '
                  </select>
              </td>
              </tr>
              <tr>
              <td class="ligne_sep_coord2" colspan="3"></td>
                </tr>
                <tr>
              <td class="intitule_coord"><p>Budjet de l operation&nbsp;:</p></td>
              <td class="chps_long_coord">
              <select id="budjetop" name="budjetop"  class="chps_long_form" >
                  ' . $Form->Select_General($budjetop, 'budjetop', '', '', 'id','') . '
                  </select>
              </td>
              </tr>
              </table>
      </div>
      </td>
      </tr>

**cUs3Mp** · 17/12/2008, 21h01

super merci

je teste ca dés que possible.

donc au moins je sais que le souci vient bien du tableau indivisible.

bonne soirée

Afficher/masquer balise <div></div>

Langage PHP

Discussions similaires

Partager

Partager