div id et affichage de tableau javascript + Struts

**littlebear** · 27/01/2009, 12h12

Bonjour,

Mon souci étant que je souhaiterais afficher un deuxième tableau juste en dessou d'un premier tableau. Ce deuxième tableau apparaitrait lorsque l'on click sur une colonne lien du premier tableau.

J'ai essayé de faire un test (AffichePopup('popup1','OK')

mais il ne semble pas vouloir cacher l'élément dans le div.
Voici mon code javascript :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<script language="javascript">
function AffichePopup(id, action) {
	var d = document.getElementById(id);
	if (d.style.display == "")	{
			d.style.display = "block";
		} else {
			d.style.display = "";
		} 
 
}
</script>

Voici mon code jsp:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
 
<tbody>
  <tr>
     <logic:iterate id="MIFetatACAV" name="ListEtatACAV" >
  <tr>
     <td align="center"><bean:write name="MIFetatACAV" property="idsupport"/></td>
     <td align="center"><bean:write name="MIFetatACAV" property="libellecourt"/></td>				
     <td align="center"><bean:write name="MIFetatACAV" property="valeur"/></td>					
     <td align="center"><bean:write name="MIFetatACAV" property="montantacavp"/></td>
     <td align="center"><bean:write name="MIFetatACAV" property="montantacava"/></td>	
     <td align="center">
        <a href="#" onclick="javascript:AffichePopup('TableauFluxAcav','OK');return false;">
       <html:link action="initEtatACAV" paramName="MIFetatACAV" paramId="idacavattente" paramProperty="idacavattente">		
	<bean:write name="MIFetatACAV" property="montantacavattente"/>
       </html:link></a></td>
       <logic:present name="cache" scope="session">
	<td align="center"><bean:write name="MIFetatACAV" property="idacavattente"/></td>	
       </logic:present>					   
     </tr>
       </logic:iterate>
     </tr>							
</tbody>	
<tfoot>
     <tr class="tdhead">
        <td colspan="1" class="table-page:1 cursor:pointer text-align:right" width="5%" id="first"><<</td>
        <td colspan="1" class="table-page:previous cursor:pointer text-align:right" width="5%" id="previous"><</td>
        <td colspan="2" style=text-align:center;>Page <script language="javascript">document.write(t1page+"/"+t1pages)</script></td>
        <td colspan="1" class="table-page:next cursor:pointer;text-align:right;" width="5%" id="next">></td>
        <td colspan="1" class="table-page:t1pages cursor:pointer;text-align:right;" width="5%" id="end">>></td>
     </tr>
</tfoot>
<!-- Fin du tableau ACAV-->
<!-- Début du tableau FLUXACAV-->
<!-- Debut Test Div -->          
<td><a href="#" onclick="javascript:AffichePopup('popup1','OK');return false;">999.999.999,99</a></td>
<div id="popup1" > test </div> 				
<!-- Fin Test Div -->
<!-- Affichage du tableau -->
<logic:equal property="hasResultFlux" name="mifRechercheFluxActionForm"  value="true" > 
<div id="TableauFluxAcav">
						<table class="table-autopage:6 table-page-number:t1page table-page-count:t1pages table-stripeclass:alternative tablelist">
					                 <thead>
					                 <p></p>
					                 <p></p>
					           		<tr class="tdhead1">
										<td colspan="14"><i>Support 1 : Flux comptabilisés pour l'ACAV en attente</i></td>
									</tr>	
					                 <tr class="tdhead">
 
									<td colspan="2"><bean:message key="num.flux"/></td>
									<td><bean:message key="type.date.valeur"/></td>
									<td><bean:message key="label.montant"/></td>
									<td><bean:message key="parts.pro"/></td>
									<td><bean:message key="cours.pro"/></td>
									<td><bean:message key="parts.def"/></td>
									<td><bean:message key="cours.def"/></td>
									<td><bean:message key="label.di"/></td>
									<td><bean:message key="label.rf"/></td>
									<td><bean:message key="label.statut"/></td>
									<td><bean:message key="label.type"/></td>
									<td colspan="2"><bean:message key="label.support"/></td>
								</tr>
		                   	    </thead>
							<logic:notEmpty name="mifRechercheFluxActionForm" property="listResult" >
 
		                   	   <tbody>
									<tr>
										<logic:iterate id="ligneFlux" name="mifRechercheFluxActionForm" property="listResult" type="intCommunBean.flux.MifResultRechercheFluxBean" indexId="index" >
										<tr>
									<td colspan="2">
									<html:link action="initEtatACAV" paramName="ligneFlux" paramId="numeroFlux" paramProperty="numeroFlux">
										<bean:write name="ligneFlux" property="numeroFlux"/></html:link> </td>
									<td><bean:write name="ligneFlux" property="strValeur"/></td> 
									<td><bean:write name="ligneFlux" property="montant"/></td>
									<td><bean:write name="ligneFlux" property="partsPro"/></td>
									<td><bean:write name="ligneFlux" property="coursPro"/></td>
									<td><bean:write name="ligneFlux" property="partsDef"/></td>
									<td><bean:write name="ligneFlux" property="coursDef"/></td>
									<td><bean:write name="ligneFlux" property="di"/></td>
									<td><bean:write name="ligneFlux" property="rf"/></td>
									<td><bean:write name="ligneFlux" property="typeStatut"/></td>
 
									<td><bean:write name="ligneFlux" property="type"/></td>
									<td colspan="2"><bean:write name="ligneFlux" property="support"/></td> 
									</tr>
        				                </logic:iterate>
								</tr>
							</tbody>	
 
							</logic:notEmpty>
 
							<tfoot>
								<tr class="tdhead">
									<td colspan="1" class="table-page:1 cursor:pointer text-align:right" width="5%" id="first"><<</td>
									<td colspan="1" class="table-page:previous cursor:pointer text-align:right" width="5%" id="previous"><</td>
									<td colspan="10" style=text-align:center;>Page <script language="javascript">document.write(t1page+"/"+t1pages)</script></td>
									<td colspan="1" class="table-page:next cursor:pointer;text-align:right;" width="5%" id="next">></td>
									<td colspan="1" class="table-page:t1pages cursor:pointer;text-align:right;" width="5%" id="end">>></td>
								</tr>
							</tfoot>
						</table>
 
					</div>

Quelqu'un pour m'expliquer où est l'erreur svp?

**Bovino** · 27/01/2009, 12h27

D'abord, merci de poster le code HTML généré.
Ensuite :

Code :

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

1
2
3
4
5
if (d.style.display == "none")	{
			d.style.display = "block";
		} else {
			d.style.display = "none";
		}

**littlebear** · 27/01/2009, 12h56

Envoyé par Bovino

D'abord, merci de poster le code HTML généré.
Ensuite :

Code :

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

1
2
3
4
5
if (d.style.display == "none")	{
			d.style.display = "block";
		} else {
			d.style.display = "none";
		}

Bonjour,

Alors le code html généré de la page partielle:

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
 
					<div>
						<div >
							<table class="table-autopage:6 table-page-number:t1page table-page-count:t1pages table-stripeclass:alternative tablelist">
								<thead>
									<tr class="tdhead">
 
										<td>N° / 2    lignes</td>  
										<td>Support</td>
										<td>VL</td>										
										<td>Passif</td>
										<td >Actif</td>
										<td >En attente</td>
<!-- 										<td >id acav attente</td>  -->
 
									</tr>
			                   	</thead>
 
			                   	<tbody>
									<tr>
 
 
											<tr>
				<!-- 							   <td>INTetatACAV.etatACAV.metier.entite.MIFetatACAVPk@145c414</td>  -->
 
 
												<td align="center">1</td>
											   <td align="center">support1</td>										   
											   <td align="center">10</td>											   
											   <td align="center">123.0</td>
											   <td align="center">4137435.45</td>	
											   <td align="center">
											   <a href="#" onclick="javascript:AffichePopup('AfficheTableauAcav','OK');return false;">
												<a href="/INTCLINFOC/initEtatACAV.do?idacavattente=1"><!-- 											   <a href="#" onclick="javascript:afficherListFluxEtatAcav(--><!-- %=2%>);return false;">  -->										   
<!-- 											    456545.45</a></td>  -->
<!-- 												456545.45 -->
												456545.45</a></a></td>
 
 
 
											</tr>
 
 
											<tr>
				<!-- 							   <td>INTetatACAV.etatACAV.metier.entite.MIFetatACAVPk@14c02d4</td>  -->
 
 
												<td align="center">2</td>
											   <td align="center">support2</td>										   
											   <td align="center">10</td>											   
											   <td align="center">2.0</td>
											   <td align="center">4.555554444E9</td>	
											   <td align="center">
											   <a href="#" onclick="javascript:AffichePopup('AfficheTableauAcav','OK');return false;">
												<a href="/INTCLINFOC/initEtatACAV.do?idacavattente=2"><!-- 											   <a href="#" onclick="javascript:afficherListFluxEtatAcav(--><!-- %=2%>);return false;">  -->										   
<!-- 											    6.54546546464E11</a></td>  -->
<!-- 												6.54546546464E11 -->
												6.54546546464E11</a></a></td>
 
 
 
											</tr>
 
									</tr>									
								</tbody>	
 
 
							<tfoot>
								<tr class="tdhead">
									<td colspan="1" class="table-page:1 cursor:pointer text-align:right" width="5%" id="first"><<</td>
									<td colspan="1" class="table-page:previous cursor:pointer text-align:right" width="5%" id="previous"><</td>
									<td colspan="2" style=text-align:center;>Page <script language="javascript">document.write(t1page+"/"+t1pages)</script></td>
									<td colspan="1" class="table-page:next cursor:pointer;text-align:right;" width="5%" id="next">></td>
									<td colspan="1" class="table-page:t1pages cursor:pointer;text-align:right;" width="5%" id="end">>></td>
								</tr>
							</tfoot>
                		<div id="espace">&nbsp;</div>
 
                		<!-- Fin du tableau ACAV-->
 
                		<!-- Début du tableau FLUXACAV-->
				<!-- Debut Moteur de recherche -->          
				<td><a href="#" onclick="javascript:AffichePopup('popup1','OK');return false;">999.999.999,99</a></td> 
 
				<div id="popup1" style="display:visible"> test </div> 				
 
				<!-- Fin Moteur de recherche -->
 
				<!-- Affichage du tableau -->
 
 
 
      					<div id="AfficheTableauAcav">
						<table class="table-autopage:6 table-page-number:t1page table-page-count:t1pages table-stripeclass:alternative tablelist">
					                 <thead>
					                 <p></p>
					                 <p></p>
					           		<tr class="tdhead1">
										<td colspan="14"><i>Support 1 : Flux comptabilisés pour l'ACAV en attente</i></td>
									</tr>	
					                 <tr class="tdhead">
 
									<td colspan="2">Numéro</td>
									<td>Valeur</td>
									<td>Montant</td>
									<td>Parts Pro</td>
									<td>Cours pro</td>
									<td>Parts Def</td>
									<td>Cours Def</td>
									<td>D.I.</td>
									<td>R.F.</td>
									<td>Statut</td>
									<td>Type</td>
									<td colspan="2">Support</td>
								</tr>
		                   	    </thead>
 
 
		                   	   <tbody>
									<tr>
 
										<tr>
									<td colspan="2">
									<a href="/INTCLINFOC/initEtatACAV.do?numeroFlux=3">3</a> </td>
									<td>05/01/2009</td> 
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>A Négocier                                                                                                                                                                                                                                                     </td>
 
									<td>1                                                                                                                                                                                                                                                              </td>
									<td colspan="2">support2</td> 
									</tr>
 
										<tr>
									<td colspan="2">
									<a href="/INTCLINFOC/initEtatACAV.do?numeroFlux=4">4</a> </td>
									<td>06/01/2009</td> 
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>A Négocier                                                                                                                                                                                                                                                     </td>
 
									<td>1                                                                                                                                                                                                                                                              </td>
									<td colspan="2">support2</td> 
									</tr>
 
										<tr>
									<td colspan="2">
									<a href="/INTCLINFOC/initEtatACAV.do?numeroFlux=7">7</a> </td>
									<td>07/01/2009</td> 
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>1.0</td>
									<td>A Négocier                                                                                                                                                                                                                                                     </td>
 
									<td>1                                                                                                                                                                                                                                                              </td>
									<td colspan="2">support2</td> 
									</tr>
 
								</tr>
							</tbody>	
 
 
 
							<tfoot>
								<tr class="tdhead">
									<td colspan="1" class="table-page:1 cursor:pointer text-align:right" width="5%" id="first"><<</td>
									<td colspan="1" class="table-page:previous cursor:pointer text-align:right" width="5%" id="previous"><</td>
									<td colspan="10" style=text-align:center;>Page <script language="javascript">document.write(t1page+"/"+t1pages)</script></td>
									<td colspan="1" class="table-page:next cursor:pointer;text-align:right;" width="5%" id="next">></td>
									<td colspan="1" class="table-page:t1pages cursor:pointer;text-align:right;" width="5%" id="end">>></td>
								</tr>
							</tfoot>
						</table>
 
					</div>
 
					<!-- Fin du tableau -->

Et en rajoutant none, ça ne fait pas de changement. ça reste affiché sans même avoir clické sur le lien.

**Bovino** · 27/01/2009, 13h39

Code :

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

<div id="popup1" style="display:visible"> test </div>

display: visible, ça n'existe pas, c'est block, inline ou none pour les propriétés les plus courantes.

**littlebear** · 27/01/2009, 14h34

Envoyé par Bovino

Code :

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

<div id="popup1" style="display:visible"> test </div>

display: visible, ça n'existe pas, c'est block, inline ou none pour les propriétés les plus courantes.

D'accord mais ce que je ne comprend pas c'est que le script est le suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script language="JavaScript">
function AffichePopup(id, action) {
	var d = document.getElementById(id);
if (d.style.display == "none")	{
			d.style.display = "block";
		} else {
			d.style.display = "none";
		}
}
 
 
</script>

La ligne qui permet d'appeler la fonction est la suivante :

Code :

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

1
2
3
4
5
6
7
8
 
											   <a href="#" onclick="javascript:AffichePopup('AfficheTableauAcav','OK');return false;">
												<html:link action="initEtatACAV" paramName="MIFetatACAV" paramId="idacavattente" paramProperty="idacavattente">											  
												<bean:write name="MIFetatACAV" property="montantacavattente"/>
												</html:link></a></td>
												<logic:present name="cache" scope="session">
												<td align="center"><bean:write name="MIFetatACAV" property="idacavattente"/></td>	
												</logic:present>

Et le contenu du div qui devrait apparaitre après un click sur le lien est le suivant :

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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
	   					<div id="AfficheTableauAcav">
						<table class="table-autopage:6 table-page-number:t1page table-page-count:t1pages table-stripeclass:alternative tablelist">
					                 <thead>
					                 <p></p>
					                 <p></p>
					           		<tr class="tdhead1">
										<td colspan="14"><i>Support 1 : Flux comptabilisés pour l'ACAV en attente</i></td>
									</tr>	
					                 <tr class="tdhead">
 
									<td colspan="2"><bean:message key="num.flux"/></td>
									<td><bean:message key="type.date.valeur"/></td>
									<td><bean:message key="label.montant"/></td>
									<td><bean:message key="parts.pro"/></td>
									<td><bean:message key="cours.pro"/></td>
									<td><bean:message key="parts.def"/></td>
									<td><bean:message key="cours.def"/></td>
									<td><bean:message key="label.di"/></td>
									<td><bean:message key="label.rf"/></td>
									<td><bean:message key="label.statut"/></td>
									<td><bean:message key="label.type"/></td>
									<td colspan="2"><bean:message key="label.support"/></td>
								</tr>
		                   	    </thead>
							<logic:notEmpty name="mifRechercheFluxActionForm" property="listResult" >
 
		                   	   <tbody>
									<tr>
										<logic:iterate id="ligneFlux" name="mifRechercheFluxActionForm" property="listResult" type="intCommunBean.flux.MifResultRechercheFluxBean" indexId="index" >
										<tr>
									<td colspan="2">
									<html:link action="initEtatACAV" paramName="ligneFlux" paramId="numeroFlux" paramProperty="numeroFlux">
										<bean:write name="ligneFlux" property="numeroFlux"/></html:link> </td>
									<td><bean:write name="ligneFlux" property="strValeur"/></td> 
									<td><bean:write name="ligneFlux" property="montant"/></td>
									<td><bean:write name="ligneFlux" property="partsPro"/></td>
									<td><bean:write name="ligneFlux" property="coursPro"/></td>
									<td><bean:write name="ligneFlux" property="partsDef"/></td>
									<td><bean:write name="ligneFlux" property="coursDef"/></td>
									<td><bean:write name="ligneFlux" property="di"/></td>
									<td><bean:write name="ligneFlux" property="rf"/></td>
									<td><bean:write name="ligneFlux" property="typeStatut"/></td>
 
									<td><bean:write name="ligneFlux" property="type"/></td>
									<td colspan="2"><bean:write name="ligneFlux" property="support"/></td> 
									</tr>
        				                </logic:iterate>
								</tr>
							</tbody>	
 
							</logic:notEmpty>
 
							<tfoot>
								<tr class="tdhead">
									<td colspan="1" class="table-page:1 cursor:pointer text-align:right" width="5%" id="first"><<</td>
									<td colspan="1" class="table-page:previous cursor:pointer text-align:right" width="5%" id="previous"><</td>
									<td colspan="10" style=text-align:center;>Page <script language="javascript">document.write(t1page+"/"+t1pages)</script></td>
									<td colspan="1" class="table-page:next cursor:pointer;text-align:right;" width="5%" id="next">></td>
									<td colspan="1" class="table-page:t1pages cursor:pointer;text-align:right;" width="5%" id="end">>></td>
								</tr>
							</tfoot>
						</table>
 
					</div>

Pour tester l'affichage d'un div j'ai fait ça :

Code :

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

1
2
3
 
				<td><a href="#" onclick="javascript:AffichePopup('popup1','OK');return false;">999.999.999,99</a></td> 
				<div id="popup1" > test </div>

normalement si je click sur le lien 999.999.999,99 il devrait m'afficher test, n'est ce pas? Or moi, test est déjà affiché quand je vais sur la page.

J'ai essayé de mettre

Code :

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

1
2
 
<div id="popup1" style="display:none;"> test </div>

Mais toujours rien, il ne s'affiche pas lorsque l'on click.

**Matthieu2000** · 27/01/2009, 15h03

As tu autorisé l'application des feuille de style?

**Bovino** · 27/01/2009, 15h08

Alors, quelques conseils :
* Lorsque tu postes du code, étant donné que nous sommes dans la section JavaScript, le code serveur ne nous intéresse pas, il nous faut le code HTML généré (qui permet d'ailleurs de déceler des erreurs de syntaxe en langage serveur)
* Fais attention à l'indentation, j'imagine que tu comprendras facillement que les morceaux de code que tu as postés plus haut ne donnent pas très envie de les regarder... puisqu'on ne les voit pas.

Concernant ton souci, ce code fonctionne très bien chez moi...

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css">
</style>
<script type="text/javascript"> 
<!--// [CDATA[ 
function AffichePopup(id, action) {
        var d = document.getElementById(id);
        if (d.style.display == "none")  {
                        d.style.display = "block";
                } else {
                        d.style.display = "none";
                } 
 
}
// ]] -->
</script> 
</head>
<body>
<div id="container">
<a href="#" onclick="AffichePopup('popup1','OK');return false;">999.999.999,99</a>
<div id="popup1" style="display:none"> test </div>
</div>
</body>
</html>

div id et affichage de tableau javascript + Struts

JavaScript

Vue hybride

Discussions similaires

Partager

Partager