[HTML] problème de raffraichissement safari 3 win

**AlexC3301** · 18/08/2008, 17h56

Bonjour,

j'ai un petit problème en ce moment avec Safari 3 pour Windows (que je n'ai pas sous ie6+ et ff2+) :

j'utilise pour mon site 6 div de container qui contiennent deux divs chaques : une div de résultats et une div d'entrée de données. Je montre et je cache les divs selon les actions des utilisateurs avec un onclick sur des images. Bien entendu, les divs de résultats sont modifiées par le contenu entré (ou effacer) par l'utilisateur dans mes divs d'entrées.

Comme je disais, sous ie et ff, tout marche bien. Sous safari, il y a un binz! il faut faire un scroll, ou bouger la souris dans la page (sans rien cliquer...) pour que les éléments se rafraichissent et apparaissent enfin. Et si par hasard, la page n'a pas de scroll, ben je suis foutu... le rafraichissement ne se fait pas, mais par contre, les éléments ont l'air de se trouver à la bonne place, car tous les liens et boutons ne se trouvent plus la ou ils apparaissent, mais plutôt la ou ils devraient être....

Je comprends pas tout moi la....

Si quelqu'un a déjà connu ce genre de problème et a réussi à le parer, je suis preneur!

Merci

**c_s_s** · 18/08/2008, 18h41

Bonjour,

Une page en ligne ou le code HTML généré de ta page seraient utiles pour se faire une idée de l'origine du problème.

Utilises-tu du Javascript ou gères-tu les apparitions de blocs uniquement en CSS ?

**AlexC3301** · 18/08/2008, 19h32

Salut,

l'apparition et disparition des éléments sont gérées entièrement en JS.

Voici la vue principale ou sont affichés les résultats et les entrées de données :

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 id="ajout_section">
		<h2 class="separation"><?=$this->lang->line("voyage_creation_h2");?></h2>
		<p class="spaced_inner"><?=$this->lang->line("voyage_creation_explanation");?></p>
		<dl class="type_voyage">
			<dt><?=$this->lang->line("section_creation_type_label");?></dt>
			<dd class="choix_type_voyage <?=($boolVoyageType == 'true')?('partager'):('planifier');?>"><?=($boolVoyageType == 'true')?($this->lang->line("section_creation_type_partager")):($this->lang->line("section_creation_type_planifier"));?></dd>
		</dl>
		<div class="clearer"></div>
		<div class="espacement">
			<label class="creation_nom_voyage"><?=$this->lang->line("section_creation_nom_label");?></label>
			<div id="sVoyageName" class="bordure_grise float_left bloc_nom_voyage"><?=$strVoyageTitle;?></div>
			<div class="clearer"></div>
		</div>
		<div class="i_area">
			<label for="i_desc">Description:</label>
			<p class="bordure_grise"><?
        if (isset($strVoyageDescription) && ($strVoyageDescription != ""))
                echo nl2br($strVoyageDescription);
        else
                echo $this->lang->line("section_creation_no_desc");
?></p>
		</div>
		<p class="bt_action">
			<a href="#" onclick="editerInfoVoyage(); return false;" class="bt_edit"><?=$this->lang->line("voyage_lien_editer");?></a>
		</p>
		<div class="clearer"></div>
		<div id="new_section">
			<div id="listeSection" class="title space_r_l separation_top">
				<h3 class="title_section_ajouter"><?=$this->lang->line("section_creation_liste_section_h2");?></h3>
				<div class="eki_footer boite2 boite2_r-t box_add_travel" id="btn_add" style="display : <?=($boolIsSectionOpen==true)?('none'):('block');?>">
					<div class="boite2_l-b">
						<div class="boite2_r-b">
							<p class="boite2_l-t"><a href="#"  onclick="showContentBox(); return false;" class="icn_add"><?=$this->lang->line("section_creation_link_creation_section");?></a></p>
							<div class="clearer"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="clearer"></div>
			<div id="listeSectionVide" class="content_sections_ajout">
<? if (is_null($arrEtapes)) : ?>
					<p><?=$this->lang->line("section_creation_liste_vide");?></p>
<?      else : ?>
<?              foreach ($arrEtapes as $etape) : ?>
					<dl class="section_ajouter"><dt><?=$etape['title'];?></dt></dl>
					<div class="clearer"></div>
<?              endforeach;?>
<?      endif; ?>
			</div>
			<div class="clearer"></div>
		</div><!-- new_section end -->
		<div class="clearer"></div>
		<div id="content_box" style="display : <?=($boolIsSectionOpen==true)?('block'):('none');?>">
			<form name="uploadFile" id="uploadFile" class="voyage" enctype="multipart/form-data" method="post">
				<input type="hidden" id="sectionId" name="sectionId" value="" />
				<input type="hidden" id="voyageId" name="voyageId" value="<?=$generic_id;?>" />
				<input type="hidden" id="itemId" name="itemId" value="" />
				<h3 class="separation_top"><?=$this->lang->line("section_creation_ajouter_h2");?></h3>
				<p><?=$this->lang->line("section_creation_ajouter_explanation");?></p>
				<div id="erreurJsDescription" style="display : none"></div>
				<div id="erreurJsToDo" style="display : none"></div>
				<div id="erreurJsPhoto" style="display : none"></div>
				<div id="erreurJsEkistop" style="display : none"></div>
				<div id="erreurJsTitle" style="display : none"></div>
				<div class="i_txt espacement">
					<div id="pTitle"><label id="label_titre_section" for="section_title"><?=$this->lang->line("section_creation_input_title");?></label><input type="text" id="section_title" name="section_title" maxlength="255" value="<?=$section_title;?>"/></div>
				</div>
				<ul id="menu_creation_voyage">
					<li id="sct_texte"><a href="#" id="onglet1" onclick="showDiv('1'); return false;"><?=$this->lang->line("section_creation_onglet_texte");?></a></li>
					<li id="sct_a_faire"><a href="#" id="onglet2" onclick="showDiv('2'); return false;"><?=$this->lang->line("section_creation_onglet_todo");?></a></li>
					<li id="sct_galerie"><a href="#" id="onglet3" onclick="showDiv('3'); return false;"><?=$this->lang->line("section_creation_onglet_galerie");?></a></li>	
					<li id="sct_ekistop"><a href="#" id="onglet4" onclick="showDiv('4'); return false;"><?=$this->lang->line("section_creation_onglet_ekistop");?></a></li>
				</ul>
				<div id="box_creation_voyage">
					<div id="div1" style="display : none" class="content">
						<p><?=$this->lang->line("section_creation_input_description_explanation");?></p>
						<div id="pInputDescription" class="i_area espacement"><label for="Description"><span id="label_Description"><?=$this->lang->line("section_creation_input_description_label");?></span></label><textarea rows="6" cols="50" name="Description" id="Description"><?=$$section_desc;?></textarea></div>
						<div id="pLinkDescription">
							<p class="bt_action" id="btAjoutDescription">
								<a href="#" onclick="addContent('Description'); return false;" class="bt bt_long_x gris"><span><?=$this->lang->line("section_creation_input_description_link");?></span></a>
							</p>
							<p class="bt_action" id="btModificationDescription" style="display : none">
								<a class="bt gris" onclick="modifyContent('Description', null); return false;"><span><?=$this->lang->line("voyage_edition_section_sauve");?></span></a>
								<a class="bt_annuler" href="#" onclick="document.getElementById('btModificationDescription').style.display='none';document.getElementById('btAjoutDescription').style.display='block'; return false;"><?=$this->lang->line("voyage_lien_annuler");?></a>
							</p>
						</div>
						<div id="pDescription">
						</div>
						<div class="clearer"></div>
					</div>
					<div id="div2" style="display : none" class="content">
						<p><?=$this->lang->line("section_creation_todo_explanation");?></p>
						<div id="pInputToDo" class="i_txt espacement">
							<label class="espacement_small" for="ToDo"><span id="label_ToDo"><?=$this->lang->line("section_creation_todo_input_label");?></span></label>
							<div class="clearer"></div>
							<input type="text" name="ToDo" id="ToDo" maxlength="70" value="<?=$todo;?>" class="long" />
						</div>
						<div id="pLinkToDo">
							<p class="bt_action" id="btAjoutToDo">
								<a href="#" onclick="addContent('ToDo'); return false;" class="bt bt_long gris"><span><?=$this->lang->line("section_creation_todo_ajout");?></span></a>
							</p>
							<p class="bt_action" id="btModificationToDo" style="display : none">
								<a class="bt gris" href="#" onclick="modifyContent('ToDo', '421'); return false;"><span><?=$this->lang->line("voyage_edition_section_sauve");?></span></a>
								<a class="bt_annuler" href="#" onclick="document.getElementById('btAjoutToDo').style.display='block';document.getElementById('btModificationToDo').style.display='none'; return false;"><?=$this->lang->line("voyage_lien_annuler");?></a>
							</p>
						</div>
						<div id="pToDo" style="display : block">
							<h3 class="espacement_small"><?=$this->lang->line("section_creation_todo_result_h4");?></h3>
							<p id="pToDoVide" style="display : block"><?=$this->lang->line("section_creation_todo_vide");?></p>
							<div id="ToDoBottom" class="clearer"></div>
						</div>
						<div class="clearer"></div>
					</div>
					<div id="div3" style="display : none" class="content upload">
						<div class="fieldset_high">
							<div id="pInputPhoto" class="i_file">
								<label for="inputPhoto"><span id="label_Photo"><?=$this->lang->line("section_creation_photo_label_input");?></span></label><input type="file" id="inputPhoto" name="photo" class="med float_left" size="50" />
							</div>
							<p class="rule"><?=$this->lang->line("section_creation_photo_explanation");?></p>
							<div class="i_txt">
								<label for="Photo_legende" class="label_legende"><?=$this->lang->line("section_creation_photo_legende_label");?></label>
								<input type="text" id="Photo_legende" name="Photo_legende" maxlength="70" class="med float_left" />
							</div>
							<div id="pLinkPhoto">
								<p class="marge_section_preview" id="btAjoutPhoto">
									<a class="bt bt_long gris" href="#" onclick="addContent('Photo'); return false;"><span><?=$this->lang->line("section_creation_photo_link_ajout");?></span></a>
								</p>
								<p class="marge_section_preview bt_action" id="btModificationPhoto" style="display : none">
									<a class="bt gris" onclick="modLegende('173', 'Photo'); return false;"><span><?=$this->lang->line("voyage_edition_section_sauve");?></span></a>
									<a class="bt_annuler" href="#" onclick="document.getElementById('btModificationPhoto').style.display='none'; document.getElementById('btAjoutPhoto').style.display='block'; return false;"><?=$this->lang->line("voyage_lien_annuler");?></a>
								</p>
							</div>
							<div id="pPhoto" class="separation_top">
								<div id="videoRes">
									<h3><?=$this->lang->line("section_creation_photo_res_video_h3");?></h3>
									<p id="listeVideVideo"><?=$this->lang->line("section_creation_photo_video_vide");?></p>
								</div>							
								<div id="photoRes">
									<h3><?=$this->lang->line("section_creation_photo_res_photo_h3");?></h3>
									<p id="listeVidePhoto"><?=$this->lang->line("section_creation_photo_photo_vide");?></p>
								</div>
							</div>
						</div>
						<div class="clearer"></div>
					</div>
					<div id="div4" style="display : none" class="content ajouter_ekistop">
						<p><?=$this->lang->line("section_creation_ekistop_explanation");?></p>
						<div id="pInputEkistop">
							<dl class="option_ajouter_ekistop">
								<dt><span id="label_Ekistop"><?=$this->lang->line("section_creation_ekistop_label_links");?></span></dt>
								<dd><a id="ekiPerso" href="#" onclick="afficherEki('mes'); return false;"><?=$this->lang->line("section_creation_ekistop_label_mes");?></a><span>|</span></dd>	
								<dd><a id="ekiFan" href="#" onclick="afficherEki('fan'); return false;"><?=$this->lang->line("section_creation_ekistop_label_fan");?></a><span>|</span></dd>
								<dd><a id="ekiRecherche" href="#" onclick="afficherEki('recherche'); return false;"><?=$this->lang->line("section_creation_ekistop_label_recherche");?></a></dd>
							</dl>
						</div>
						<div class="clearer"></div>
						<div class="i_txt i_recherche" id="pLinkEkistopRecherche" style="display : none">
							<label for="search"><span><?=$this->lang->line("section_creation_ekistop_label_input_recherche");?></span></label>
							<div class="clearer"></div>
							<input type="text" name="search" id="search" />
							<p class="bt_action float_left">
								<a href="#recherche" onclick="rechercheEkistop(); return false;" class="bt bt_med"><span><?=$this->lang->line("voyage_lien_rechercher");?></span></a>
							</p>
							<div class="clearer"></div>
							<p class="rule" style="width:100%"><?=$this->lang->line("section_creation_ekistop_recherche_explanation");?></p>
						</div>
						<div id="pLinkEkistop" style="display : none"></div>
						<div class="clearer"></div>
						<div id="pEkistop">
							<h3><?=$this->lang->line("section_creation_ekistop_res_h4");?></h3>
							<p id="pEkistopVide" style="display : <?=(is_null($ekistop_list))?('block'):('none');?>"><?=$this->lang->line("voyage_affichage_pas_ekistop");?></p>
							<span id="EkistopBottom" class="clearer"></span>
						</div>
						<div class="clearer"></div>
					</div>
					<div class="bottom"></div>
				</div>
			</form>
			<p class="bt_action separation_top bt_submit spaced_big">
				<a href="#" onclick="sauverSection(); return false;" class="bt bt_longer_x gris"><span><?=$this->lang->line("section_creation_link_ajout_section");?></span></a>
				<a href="#" onclick="annulerSection(); return false;" class="bt_annuler"><span><?=$this->lang->line("voyage_lien_annuler");?></span></a>
			</p>
			<div class="clearer"></div>
		</div><!-- content_box end -->
	</div> <!-- ajout_section end -->
	<p class="bt_action separation_top spaced_big">
		<a href="<?=site_url("voyage/".$this->lang->line("voyage_lien_publier")."/".$this->lang->line("voyage_lien_voyage")."/".$generic_id);?>" class="bt bt_long"><span><?=($boolIsSectionOpen || $boolAjoutSection)?($this->lang->line("voyage_lien_sauve_bouton")):($this->lang->line("voyage_lien_publier_bouton"));?></span></a>
		<a href="<?=site_url($this->lang->line("profil_voyage").$member_id);?>" class="bt_annuler"><?=$this->lang->line("voyage_lien_annuler");?></a>
	</p>
	<div class="clearer"></div>

le résultat est aussi géré par javascript (appel grace à YAHOO.util.Connect à mon contrôleur en PHP), avec selon le cas des appendChild / insertBefore ou bien des innerHTML selon la réponse du contrôleur.

Les résultats sont affichés dans ces div :

pDescription
pToDo
videoRes
photoRes
pEkistop

**c_s_s** · 18/08/2008, 20h05

Merci pour ton code mais ce n'est pas un code généré, c'est un code brut.

Je pensais plutôt au HTML qui s'affiche lorsqu'on regarde le code source d'une page.

Une page en ligne serait vraiment l'idéal.

**AlexC3301** · 19/08/2008, 14h27

oups... désolé, mon erreur...

Pour la page en ligne, je ne peux pas, mon boss veux pas ouvrir le site... les adresses dans les pages ne seront donc pas visibles de l'exterieur.

Sinon, voici le rendu html :

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
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
 
 
<!-- container -->
<div id="container">
	<!-- header -->
 
 
	<div id="header">
		<h1><a href="http://backend.ekimondo.com/index.php/fr/front_page/index.html" title="Retour à l’accueil">ekimondo - Répertoire des destinations et du voyage responsables</a></h1>
 
		<div id="menu">
			<div id="menu_inner">
 
				<ul id="menu_compte">
										<li class="user"><a href="http://backend.ekimondo.com/index.php/fr/profil/apercu.html">Mon profil</a> <a href="http://backend.ekimondo.com/index.php/fr/auth/logout.html"><img src="/img/icn_disconnect.gif" alt=""></a></li>
					<li id="menu_eki_creer">
<a href="http://backend.ekimondo.com/index.php/fr/creer_ekistop.html">Créer un <strong>eki</strong>stop</a>					</li>
					<li id="menu_aide"><a href="http://backend.ekimondo.com/index.php/fr/statique/aide.html" rel="nofollow">aide</a></li>
					<!--<li id="menu_other_lang"><a href="javascript:changeLanguage('en','fr','profile')">English</a></li>-->
					<li id="menu_other_lang"><a href="">English</a></li>
				</ul>
 
				<div class="clearer">&nbsp;</div>
 
				<div id="menu_princ">
					<form action="http://backend.ekimondo.com/index.php/fr/recherche/resultats.html" method="post" id="form_recherche" name="form_recherche">
						<div>
							<p class="i_txt"><label for="recherche_requete" class="none">Rechercher</label> <input id="recherche_requete" name="search_query" type="text"></p>
							<p><a href="javascript:document.form_recherche.submit();" class="bt"><span>Rechercher</span></a></p>
							<noscript><p><input type="submit" value="Recherche" /></p></noscript>
						</div>
					</form>
					<ul>
						<li id="menu_ekimondo"><a href="/"><strong>ekimondo</strong></a></li>
						<li id="menu_blogue"><a href="http://blogue.ekimondo.com/">Blogue</a></li>
<li id="menu_partir"><a href="http://www.partirautrement.ca">Partir autrement</a></li>						<li id="menu_ekistop" class="last"><a href="http://backend.ekimondo.com/index.php/fr/ekistop/accueil/0/0/0/1.html"><strong>eki</strong>stops</a></li>
					</ul>
				</div><!-- menu_right end   -->
 
			</div><!-- menu_inner end -->
		</div><!-- menu end -->
 
	</div><!-- header end -->
 
	<!-- content -->
	<div id="content">
		<div id="breadcrumbs"><a href="http://backend.ekimondo.com/index.php"><strong>ekimondo</strong></a> &gt; <a href="http://backend.ekimondo.com/index.php/fr/profil/apercu/1013.html">Mon profil</a> &gt; <a href="http://backend.ekimondo.com/index.php/fr/voyage/affichage/1013.html">Voyages</a> &gt; Créer un voyage</div>
		<ul id="menu_profil">
			<li id="profil_information"><a href="http://backend.ekimondo.com/index.php/fr/profil/apercu/1013.html">Informations</a></li>
			<li id="profil_ekistops"><a href="http://backend.ekimondo.com/index.php/fr/profil/affichage/1013/1.html"><strong>eki</strong>stops</a></li>
			<li id="profil_favoris"><a href="http://backend.ekimondo.com/index.php/fr/profil/fan_ekistop/1013/1.html">Favoris</a></li>	
			<li id="profil_voyages"><a href="http://backend.ekimondo.com/index.php/fr/voyage/affichage/1013.html">Voyages</a></li>
		</ul>
		<div class="clearer"></div>
		<!-- col -->
		<div id="col">
			<div id="newVoyage" style="display: none;">
				<h2 class="separation">Créer un voyage</h2>
				<p>"Créer un voyage" vous permet de partager un voyage passé ou de  planifier votre prochain voyage. Décrivez les étapes de votre séjour, publiez des photos et des vidéos, et affichez les ekistops qui vous ont plu ou que vous comptez visiter.</p>
				<p><em>* Les champs marqués d'un astérisque sont obligatoires.</em></p>
	         <div style="display: none;" class="" id="erreurJs"></div>		
				<form action="#" id="voyage" name="voyage"><!-- Mode création -->
					<input id="action" name="action" value="ajout_voyage" type="hidden">
					<input id="typeVoyage" name="typeVoyage" value="future" type="hidden">
					<input id="VoyageName" name="VoyageName" value="" type="hidden">
					<input id="editionVoyageId" name="editionVoyageId" value="" type="hidden">
					<input id="edition" name="edition" value="" type="hidden">
					<dl class="type_voyage">
						<dt><span id="label_type">* Vous souhaitez : </span></dt>
						<dd><a class="bt_partager_voyage" href="#" id="passe" onclick="validType('passe'); return false;">Partager un voyage</a></dd>
						<dd><a href="#" id="future" onclick="validType('future'); return false;" class="bt_planifier_voyage planifier_actif">Planifier votre voyage</a></dd>
					</dl>
					<div class="clearer"></div>
					<div class="i_txt espacement">
						<label id="label_nom" for="nom_voyage">* Titre du voyage :</label>
						<input id="nom_voyage" name="nom_voyage" maxlength="70" value="" type="text">
					</div>
					<div class="i_area espacement" id="voyageDescription" style="display: none;">
						<label id="label_description" for="voyage_desc">Description :</label>
						<textarea rows="6" cols="50" id="voyage_desc" name="voyage_desc"></textarea>
					</div>
					<p class="bt_action separation_top" id="pBtnVoyage">
						<a href="#" class="bt bt_long" onclick="verifVoyage()"><span>Créer le voyage</span></a>
						<a href="http://backend.ekimondo.com/index.php/fr/voyage/affichage/1013.html" class="bt_annuler">Annuler</a>
					</p>
					<div class="clearer"></div>
				</form><!-- Mode création end -->	
			</div><!-- new voyage end -->
			<div id="reponse" style="display: block;"><!-- début de la vue ajoutSection -->
	<div id="ajout_section">
		<h2 class="separation">Créer un voyage</h2>
		<p class="spaced_inner">"Créer un voyage" vous permet de partager un voyage passé ou de  planifier votre prochain voyage. Décrivez les étapes de votre séjour, publiez des photos et des vidéos, et affichez les ekistops qui vous ont plu ou que vous comptez visiter.</p>
		<dl class="type_voyage">
			<dt>Type de voyage :</dt>
			<dd class="choix_type_voyage planifier">Planifier un voyage</dd>
		</dl>
		<div class="clearer"></div>
		<div class="espacement">
			<label class="creation_nom_voyage">Nom du voyage :</label>
			<div id="sVoyageName" class="bordure_grise float_left bloc_nom_voyage">test2</div>
			<div class="clearer"></div>
		</div>
		<div class="i_area">
			<label for="i_desc">Description:</label>
			<p class="bordure_grise">Aucune description</p>
		</div>
		<p class="bt_action">
			<a href="#" onclick="editerInfoVoyage(); return false;" class="bt_edit">Éditer</a>
		</p>
		<div class="clearer"></div>
		<div id="new_section">
			<div id="listeSection" class="title space_r_l separation_top">
				<h3 class="title_section_ajouter">Liste des sections ajoutées</h3>
				<div class="eki_footer boite2 boite2_r-t box_add_travel" id="btn_add" style="display: none;">
					<div class="boite2_l-b">
						<div class="boite2_r-b">
							<p class="boite2_l-t"><a href="#" onclick="showContentBox(); return false;" class="icn_add">Ajouter une nouvelle section</a></p>
							<div class="clearer"></div>
						</div>
					</div>
				</div>
			</div>
			<div class="clearer"></div>
			<div id="listeSectionVide" class="content_sections_ajout">
					<p>Aucune section ajoutée</p>
			</div>
			<div class="clearer"></div>
		</div><!-- new_section end -->
		<div class="clearer"></div>
		<div id="content_box" style="display: block;">
			<form name="uploadFile" id="uploadFile" class="voyage" enctype="multipart/form-data" method="post">
				<input id="sectionId" name="sectionId" value="" type="hidden">
				<input id="voyageId" name="voyageId" value="812" type="hidden">
				<input id="itemId" name="itemId" value="" type="hidden">
				<h3 class="separation_top">Ajouter une nouvelle section</h3>
				<p>"Ajouter une nouvelle section" vous permet d'ajouter des informations relatives à votre voyage passé ou en cours de planification en cliquant sur l'un des onglets suivants.</p>
				<div id="erreurJsDescription" style="display: none;"></div>
				<div id="erreurJsToDo" style="display: none;"></div>
				<div id="erreurJsPhoto" style="display: none;"></div>
				<div id="erreurJsEkistop" style="display: none;"></div>
				<div id="erreurJsTitle" style="display: none;"></div>
				<div class="i_txt espacement">
					<div id="pTitle"><label id="label_titre_section" for="section_title">Titre de la section :</label><input id="section_title" name="section_title" maxlength="255" value="" type="text"></div>
				</div>
				<ul id="menu_creation_voyage">
					<li id="sct_texte"><a href="#" id="onglet1" onclick="showDiv('1'); return false;">Notes</a></li>
					<li id="sct_a_faire"><a href="#" id="onglet2" onclick="showDiv('2'); return false;">Liste</a></li>
					<li id="sct_galerie"><a href="#" id="onglet3" onclick="showDiv('3'); return false;">Galerie</a></li>	
					<li id="sct_ekistop"><a href="#" id="onglet4" onclick="showDiv('4'); return false;"><strong>eki</strong>stops</a></li>
				</ul>
				<div id="box_creation_voyage">
					<div id="div1" style="display: none;" class="content">
						<p>Inscrivez ici les notes générales relatives à votre voyage passé ou à la planification de votre voyage.</p>
						<div id="pInputDescription" class="i_area espacement"><label for="Description"><span id="label_Description">Notes au voyage :</span></label><textarea rows="6" cols="50" name="Description" id="Description"></textarea></div>
						<div id="pLinkDescription">
							<p class="bt_action" id="btAjoutDescription">
								<a href="#" onclick="addContent('Description'); return false;" class="bt bt_long_x gris"><span>Ajouter les notes au voyage</span></a>
							</p>
							<p class="bt_action" id="btModificationDescription" style="display: none;">
								<a class="bt gris" onclick="modifyContent('Description', null); return false;"><span>Sauvegarder</span></a>
								<a class="bt_annuler" href="#" onclick="document.getElementById('btModificationDescription').style.display='none';document.getElementById('btAjoutDescription').style.display='block'; return false;">Annuler</a>
							</p>
						</div>
						<div id="pDescription">
						</div>
						<div class="clearer"></div>
					</div>
					<div id="div2" style="display: none;" class="content">
						<p>Liste d'activités à ne pas manquer, de choses à ne pas oublier, de tâches à compléter, de personnes à contacter, etc. Vous pouvez inscrire autant d'informations que vous souhaitez.</p>
						<div id="pInputToDo" class="i_txt espacement">
							<label class="espacement_small" for="ToDo"><span id="label_ToDo">Ajouter à la liste :</span></label>
							<div class="clearer"></div>
							<input name="ToDo" id="ToDo" maxlength="70" value="" class="long" type="text">
						</div>
						<div id="pLinkToDo">
							<p class="bt_action" id="btAjoutToDo">
								<a href="#" onclick="addContent('ToDo'); return false;" class="bt bt_long gris"><span>Ajouter à votre liste</span></a>
							</p>
							<p class="bt_action" id="btModificationToDo" style="display: none;">
								<a class="bt gris" href="#" onclick="modifyContent('ToDo', '421'); return false;"><span>Sauvegarder</span></a>
								<a class="bt_annuler" href="#" onclick="document.getElementById('btAjoutToDo').style.display='block';document.getElementById('btModificationToDo').style.display='none'; return false;">Annuler</a>
							</p>
						</div>
						<div id="pToDo" style="display: block;">
							<h3 class="espacement_small">Votre liste</h3>
							<p id="pToDoVide" style="display: block;">Aucun item n'a été ajouté.</p>
							<div id="ToDoBottom" class="clearer"></div>
						</div>
						<div class="clearer"></div>
					</div>
					<div id="div3" style="display: none;" class="content upload">
						<div class="fieldset_high">
							<div id="pInputPhoto" class="i_file">
								<label for="inputPhoto"><span id="label_Photo">Photos et vidéos :</span></label><input id="inputPhoto" name="photo" class="med float_left" size="50" type="file">
							</div>
							<p class="rule">Vos photos doivent être en format jpg, gif ou png et ne doivent pas excéder 3 Mo. <br>Vos vidéos doivent être en format mov, mpg, avi ou flv et ne doivent pas excéder 20 Mo.</p>
							<div class="i_txt">
								<label for="Photo_legende" class="label_legende">Légende :</label>
								<input id="Photo_legende" name="Photo_legende" maxlength="70" class="med float_left" type="text">
							</div>
							<div id="pLinkPhoto">
								<p class="marge_section_preview" id="btAjoutPhoto">
									<a class="bt bt_long gris" href="#" onclick="addContent('Photo'); return false;"><span>Ajouter photos et vidéos</span></a>
								</p>
								<p class="marge_section_preview bt_action" id="btModificationPhoto" style="display: none;">
									<a class="bt gris" onclick="modLegende('173', 'Photo'); return false;"><span>Sauvegarder</span></a>
									<a class="bt_annuler" href="#" onclick="document.getElementById('btModificationPhoto').style.display='none'; document.getElementById('btAjoutPhoto').style.display='block'; return false;">Annuler</a>
								</p>
							</div>
							<div id="pPhoto" class="separation_top">
								<div id="videoRes">
									<h3>Vos vidéos</h3>
									<p id="listeVideVideo">Aucune vidéo n'a été ajoutée</p>
								</div>							
								<div id="photoRes">
									<h3>Vos photos</h3>
									<p id="listeVidePhoto">Aucune photo n'a été ajoutée</p>
								</div>
							</div>
						</div>
						<div class="clearer"></div>
					</div>
					<div id="div4" style="display: none;" class="content ajouter_ekistop">
						<p>Ajoutez les <strong>eki</strong>stops liés à votre voyage</p>
						<div id="pInputEkistop">
							<dl class="option_ajouter_ekistop">
								<dt><span id="label_Ekistop">Ajouter un <strong>eki</strong>stop parmi :</span></dt>
								<dd><a id="ekiPerso" href="#" onclick="afficherEki('mes'); return false;">Mes <strong>eki</strong>stops</a><span>|</span></dd>	
								<dd><a id="ekiFan" href="#" onclick="afficherEki('fan'); return false;">Mes favoris</a><span>|</span></dd>
								<dd><a id="ekiRecherche" href="#" onclick="afficherEki('recherche'); return false;">Tous les <strong>eki</strong>stops</a></dd>
							</dl>
						</div>
						<div class="clearer"></div>
						<div class="i_txt i_recherche" id="pLinkEkistopRecherche" style="display: none;">
							<label for="search"><span>Ajouter un ekistop à cette étape :</span></label>
							<div class="clearer"></div>
							<input name="search" id="search" type="text">
							<p class="bt_action float_left">
								<a href="#recherche" onclick="rechercheEkistop(); return false;" class="bt bt_med"><span>Rechercher</span></a>
							</p>
							<div class="clearer"></div>
							<p class="rule" style="width: 100%;">Exemple : Marchés de Vientiane, Laos</p>
						</div>
						<div id="pLinkEkistop" style="display: none;"></div>
						<div class="clearer"></div>
						<div id="pEkistop">
							<h3>Vos <strong>eki</strong>stops</h3>
							<p id="pEkistopVide" style="display: block;">Aucun <strong>eki</strong>stop n'a été ajouté.</p>
							<span id="EkistopBottom" class="clearer"></span>
						</div>
						<div class="clearer"></div>
					</div>
					<div class="bottom"></div>
				</div>
			</form>
			<p class="bt_action separation_top bt_submit spaced_big">
				<a href="#" onclick="sauverSection(); return false;" class="bt bt_longer_x gris"><span>Ajouter cette section au voyage</span></a>
				<a href="#" onclick="annulerSection(); return false;" class="bt_annuler"><span>Annuler</span></a>
			</p>
			<div class="clearer"></div>
		</div><!-- content_box end -->
	</div> <!-- ajout_section end -->
	<p class="bt_action separation_top spaced_big">
		<a href="http://backend.ekimondo.com/index.php/fr/voyage/publier/voyage/812.html" class="bt bt_long"><span>Publier le voyage</span></a>
		<a href="http://backend.ekimondo.com/index.php/fr/voyage/affichage/1013.html" class="bt_annuler">Annuler</a>
	</p>
	<div class="clearer"></div>
<!-- fin de la vue ajoutSection --></div>
		</div><!-- col end -->	
		<!-- sidebar -->
		<div id="sidebar">
			<div class="boite boite_l-b" id="map_sub">
				<div class="boite_r-b">
					<div class="boite_r-t">
						<div class="map_sub_inner boite_l-t">
							<div id="voyage_passe">
								<h3>Voyages passés</h3>
								<ul class="links">
									<li>Aucun voyage passé.</li>
								</ul>
							</div>
							<div id="voyage_planifier">
								<h3>Voyages à planifier</h3>
								<ul class="links">
									<li>Aucun voyage à planifier.</li>
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div><!-- sidebar end -->
		<div class="clearer">&nbsp;</div>
	</div><!-- content end -->
 
	<!-- footer -->
 
	<div id="footer">
		<p><strong>ekimondo</strong>&nbsp;: <a href="http://backend.ekimondo.com/index.php/fr/statique/securite.html" rel="nofollow" id="footer_securite">Sécurité et confidentialité</a> | <a href="http://backend.ekimondo.com/index.php/fr/statique/condition.html" rel="nofollow" id="footer_conditions">Conditions d’utilisation</a> | <a href="http://backend.ekimondo.com/index.php/fr/statique/engagements.html" rel="nofollow" id="footer_engagements">Engagements</a> | <a href="http://backend.ekimondo.com/index.php/fr/statique/contact.html" rel="nofollow" id="footer_contact">Contactez-nous</a> | <a href="http://backend.ekimondo.com/index.php/fr/statique/realisation.html" rel="nofollow" id="footer_realisation">Réalisation du site</a></p>
	</div><!-- footer end -->
 
	<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
	<script type="text/javascript">
                _uacct = "UA-3417333-1";
                urchinTracker();
        </script>
 
 
 
</div><!-- container end -->

comme je disais, une fois les données entrées par l'utilisateur, les div de résultat : pDescription, pToDo, photoRes, videoRes et pEkistop sont mises à jour par js; les div de liens (les pLinkxxx) sont mises à jour aussi, puis les div d'entrée sont cachées.

Le cachage des divs se fait par un element.style.display = 'none' dans mon js.
les mises à jour se font soit par des element.innerHTML, soit pas des element.appendChild ou element.insertBefore. Ces trois éléments marchent sous safari3, pour preuve.

Je ne comprends pas pourquoi le rafraichissement ne se fait pas bien... Le pire, c'est que le client est sous safari....

[HTML] problème de raffraichissement safari 3 win

HTML

Vue hybride

Discussions similaires

Partager

Partager