Discussion :

[info007]

Bonjour,

j'ai utilisé struts tiles pour la décomposition des pages de mon site(fait avec Struts et jsp).
Une page est composée d'un menu en haut, d'un autre à gauche et le body en milieu (zone dynamique).
Le problème est que lorsque je clique sur un item du menu ("accueil" par exemple), j'ai l'intention que toute la page s'actualise et se charge de nouveau ! (normalement seul la partie dynamique s'actualise).
De plus ce problème n'apparaît qu'avec InternetExplorer. Il n'y a pas de problème avec FireFox.

Moi je pense que ça doit être un problème de style mais je ne suis pas sûr, en tous cas la feuille de style que j'utilise est la suivante

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
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
body{
margin: 10px 0 10px 0;
padding:0;
text-align:center;
background:  url(images/bg.jpg) repeat-x  ;
background-attachment: fixed;
letter-spacing: 1px;
}
#page{
position: fixed;
height: 80%;
width: 580px;
 
}
#pagewidth{
width:960px;
background-color: #fff;
border: 4px solid #fff;
text-align:left;
margin-bottom: 10px;
margin-left:auto;
margin-right:auto;
font-family: Arial, Lucida Grande, Verdana, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 13px;
line-height: 1.6em;
color: #000;
position: relative;/*celle si responsable à l'actualisation*/
}
 
#header{
position: relative;
height: 93px;
width: 100%;
background: url(images/banner.jpg) no-repeat 0% 0%;
}
 
.title {
margin: 0;
padding: 32px 0 0 78px;
color: #fff;
font-size: 26px;
font-weight: bold;
letter-spacing: 1px;
}
 
#leftcol{
    width:190px;
    float:left;
    position:relative;
    background-color:#fff;
    height: 500px;
}
 
/* NAVIGATION LEFT */
 
#menu1 {
width: 190px;
float: none;
}
 
#menu1title {
margin: 0;
background-image: url(images/bg_green.gif);
padding: 2px 0 0 10px;
width: 180px;
height: 18px;
color: #fff;
font-size: 14px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
line-height: normal;
}
 
#menu1 ul {
list-style: none;
margin: 0;
padding: 0;
}
 
#menu1 li a:link, #menu1 li a:visited {
width: 164px;
\width: 190px;
w\idth: 164px;
display: block;
color: #000;
margin-left: 0px;
padding: 5px 0 0 26px;
font-weight: bold;
outline: none;
background: url(images/bg_nav.gif) repeat-y;
}
 
#menu1 li a:hover {
color: #000;
padding: 5px 0 0 26px;
text-decoration: none;
background: #fff url(images/bg_nav_over.gif);
background-repeat: no-repeat;
}
 
/* BEGIN SUBLINKS */
 
#menu1 ul ul li {margin: 0;padding: 0;}
 
#menu1 ul ul a:link,#menu1 ul ul a:visited
{
display: block;
padding: 5px 0 0 40px;
width: 150px;
color: #cc0000;
text-decoration: underline;
font-size: 11px;
}
 
#menu1 ul ul a:hover
{
background-image: none;
color: #eb9999;
text-decoration: none;
background: url(images/bg_nav.gif) repeat-y;
}
 
/* END SUBLINKS */
 
/* NAVIGATION TOP */
 
#menu2 {
margin: 0 0 12px 0;
float:left;/*left*/
width:100%;
font-size:93%;
line-height:normal;
border-bottom: 1px solid #598C01 ;/*ligne sous menu2 */
}
 
#menu2 ul {
margin:0;
padding:10px 0 0 50px;
list-style:none;
}
 
#menu2 li {
display:inline;
margin:0;
padding:0;
}
 
#menu2 a {
float:right;
background:url("images/tab_left.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
width: 100px;
}
 
#menu2 a span {
float:right;
display:block;
background:url("images/tab_right.gif") no-repeat right top;
padding:5px 8px 4px 6px;
color:#fff;
text-align: center;
}
 
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#menu2 a span {float:none;}
/* End IE5-Mac hack */
#menu2 a:hover span {
color:#FFF;
}
 
#menu2 a:hover {
background-position:0% -42px;
}
#menu2 a:focus span{ /* Quand le visiteur clique sur le lien */
color: red;
}
#menu2 a:active span{ /* Quand le visiteur clique sur le lien */
color: red;
}
#menu2 a:hover span {
background-position:100% -42px;
}
 
#menu2 #current a {
background-position:0% -42px;
}
#menu2 #current a span {
background-position:100% -42px;
}
 
a {
color: #235000;
text-decoration: underline;
font-weight: bold;
outline: none;
}
 
a:hover {
color: #9EC630;
text-decoration: none;
}
 
 
 
/*a:link {
    color: #235000;
    font-family: Verdana;
    font-size: 11px;
    font-weight: bold;
    text-decoration: underline;
 
}
a:hover {
    color: #FF8000;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    line-height: normal;
    font-variant: normal;
    text-transform: none;
    border: thin none #FFFFFF;
}
a:visited {
    color:#9EC630 ;
    font-family: verdana;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
 
}
*/
 
 
 
 
 
 
 
#list
{
margin-left: 20px;
padding-left: 0;
list-style: none;
}
 
#list li
{
position: relative;
padding-left: 16px;
background-image: url(images/list.gif);
background-repeat: no-repeat;
background-position: 0 .5em;
}
 
.borders {
border: 1px solid #000000;
}
 
#twocols{
width:770px;
float:right;
position:relative;
height: 100%;
}
 
#rightcol{
width:170px;
float:right;
position:relative;
background-color:#fff;
font-size: 11px;
line-height: 1.4em;
height: 100%;
}

j'espère poster dans l'endroit convenable.
Merci infiniment de penser à m'aider.

[OButterlin]

Le problème est que lorsque je clique sur un item du menu ("accueil" par exemple), j'ai l'intention que toute la page s'actualise et se charge de nouveau ! (normalement seul la partie dynamique s'actualise).

Non, ça dépend de ce que tu lui demandes d'afficher.

Quel est ton problème exactement ?

[info007]

merci pour ta réponse ,

non, il n'y a pas de problème dans l'affichage,j'affiche je ce veux sauf que avec IE ,je vois un flashing de toute la page cad comme si la page disparait puis apprait) et ceci n'est pas agréable à voir .
j'espère te faire comprendre le problème.

[OButterlin]

Je ne pense pas que tu puisses l'éviter, ça doit être lié au traitement interne de la requête par IE.
(Tu peux toujours demander à tes clients de passer à Firefox )

D'habitude, la page ne bouge pas tant que le serveur n'a pas commencé à envoyer une réponse, après, on peut peut-être jouer sur la taille du buffer pour que la page vienne d'un seul coup.
Il se peut aussi que le flash vienne d'un traitement javascript, tu en utilises ?

[info007]

oui,j'utilise du java script dans certaines pages

[c_nvy]

Quand tu cliques sur un élément du menu, tu exécutes quoi ? une Action Struts ou une fonction Javascript ?

[info007]

une action struts

[c_nvy]

Si c'est une Action Struts, il est normal que la page se rafraîchisse intégralement lorsque tu cliques sur un élément du menu, même si seul le contenu du body change à l'affichage.

Pour un rafraîchissement partiel de la page, il doit falloir utiliser AJAX.

[OButterlin]

Si c'est une Action Struts, il est normal que la page se rafraîchisse intégralement lorsque tu cliques sur un élément du menu, même si seul le contenu du body change à l'affichage.

Pour un rafraîchissement partiel de la page, il doit falloir utiliser AJAX.

Il me semble que c'est le "flash" qui le gêne...

[info007]

Merci pour vos réponses,

y'a pas une méthode ou un truc qui permet d'éviter ce 'flush',à part l'utilisation de Ajax? (je te rappelle que ce probleme n'apparait qu'avec IE.(sous FF ça n'existe pas ce flush)

[fr1man]

Tu peux utiliser une technique anti "flash"
En fait tu crées une iframe cachée dans ta page vers laquelle tu envoies le retour de ta requête struts.
Un fois cette iframe chargée, en javascript, tu modifies le contenu de ta page, à partir de celui de ton iframe.
Je ne sais pas si j'ai été clair, en tout cas, à l'époque, j'avais trouvé des articles sur le net expliquant le principe et cela fonctionne très bien.

[info007]

ok ,je veux essayer avec ça ,malgré que j'ai pas bien saisie ta metode
je reviendrai surement sur ce sujet poue me mettre en résolu quant j'arriverai à la solution.
Merci encore un fois

[OButterlin]

Tu peux utiliser une technique anti "flash"
En fait tu crées une iframe cachée dans ta page vers laquelle tu envoies le retour de ta requête struts.
Un fois cette iframe chargée, en javascript, tu modifies le contenu de ta page, à partir de celui de ton iframe.
Je ne sais pas si j'ai été clair, en tout cas, à l'époque, j'avais trouvé des articles sur le net expliquant le principe et cela fonctionne très bien.

Ou comment faire de l'ajax à l'ancienne

[fr1man]

Effectivement, comme quoi on arrivait à se débrouiller sans Ajax.

[c_nvy]

Il me semblait qu'il n'était pas conseillé d'utiliser des iframes, d'autant plus que cela ne fonctionne pas dans tous les navigateurs.

Enfin, dans le cas d'info007 qui n'utilise ni iframe ni AJAX, la page est obligatoirement réactualisée intégralement et ce quel que soit le navigateur que l'on utilise.
Ca m'épate vraiment que le rafraîchissement de la page ne se voit pas sous FireFox.
Va falloir qu'on m'explique pourquoi.

Donc, excusez-moi si j'insiste, mais pour faire en sorte que seul le body soit ré-actualisé, il faut utiliser AJAX ou effectivement une iframe.

[fr1man]

On dit la même chose, donc pas de problème.

[OButterlin]

...
Ca m'épate vraiment que le rafraîchissement de la page ne se voit pas sous FireFox.
Va falloir qu'on m'explique pourquoi.
...

Difficile à dire, il faudrait entrer dans le code des navigateurs...
Ce qui est certain, c'est que sous Firefox, on ne voit pas le flash, et que sous IE, il est net

[c_nvy]

On dit la même chose, donc pas de problème.

Ok mais je ne suis pas certaine qu'info007 l'ait compris comme ça.
Ce qui explique pourquoi je me suis permis d'insister.