Discussion :

[jocelyn77]

Bonjour à tous, je viens demander de l'aide pour la 3ème fois de la semaine (ce jquery me pose pas mal de prob decidement ) j'ai actuellement un soucis sur ma fonction dont le but et de scroller vers le champ vide détecté apres validation d'un formulaire.
La partie detection se passe bien j'ai fait un test et je recupère aussi correctement la hauteur de mon id mais le scrolling ne se fait pas.Cela doit provenir d'interaction entre les different element de ma fonction mais je ne vois pas comment...

Voici la fonction en jquery:

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
jQuery(function($) {
	$('#form').live("submit", function(){
		if ($.trim($("#initiateur").val()).length == 0) { 	//test une chaine sans caractère plutot qu'un champ vide pour 
			alert('champ ini vide');						//eviter de considérer les espace ou les retour a la ligne.
			$('#initiateur').focus();
			$('#initiateur').css('border-color','#8a1f11');
			hauteur=$('#initiateur').offset().top;
			$('html,body').animate({scrollTop:hauteur},1000);    //on recupere la hauteur de l'id
			return false;
		};
		$('#changement').val();
		if ($.trim($("#changement").val()).length == 0) {
			alert('champ changement vide');
			return false;
		};
	});
	//partie datepicker
	$('#datecreation, #datedebut, #datefin').datepicker({
		dateFormat : 'yy-mm-dd' //permet a la bdd d'interpréter comme format date!
	});
})

et voici le code html:

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
<form action="verif_modif.php" method="POST" id="form" >
<table class="ombrage" border="0" cellspacing='0' cellpadding='0' width="90%;" style="box-shadow:2px 2px 4px black;" >
<tr>
	<td class="colonne1" ><strong>Initiateur : </strong></td>
	<td class="colonne_colspan" colspan="2" >
		<textarea type="text" name="ini" id="initiateur" rows="5" cols="50" ><?php echo $data['initiateur']; ?></textarea>
	</td>
</tr>
<tr>
	<td class="colonne1" ><strong>Changement : </strong></td>
	<td class="colonne_colspan" colspan="2" >
		<textarea type="text" name="changement" id="changement" rows="5" cols="50" ><?php echo $data['changement']; ?> </textarea>
	</td>
</tr>
<tr>
				<td style="padding-bottom:8px;" colspan="3" class="validation">
					<center><INPUT border="0" src="images/bouton_validation.png" type="image" Value="submit" ></center>
				</td>
</tr>

[kakashi99]

salut,

peux-tu redonner ton code html ?
est-ce que tu as une erreur dans la console javascript ?

[jocelyn77]

Le code html a été ajouté

apres avoir tester quelque trucs je me suis apercu que la methode .focus() actionnait déja un scroll vers l'élément a qui je donne le focus (le champs vide donc) ce qui est plutot cool puisque c'est ce que je recherche mais malheureusement c'est un scroll rapide par defaut du navigateur (ya pas le zoli effet ) et j'ai cherché mais la methode focus ne prend pas de parametre pour gérer se scroll auto.Mais peut ere peut on rajoué une methode sur le focus et eviter d'utiliser la hauteur de l'id + la methode animate()...

et non je n'est pas d'erreur dans ma console (je suis sur firefox)

[kakashi99]

bah, en déplaçant le .focus après le .animate ça marche très bien...

[edit]par contre attention, je te l'ai déjà dit sur l'autre sujet .live() est "deprecated" et supprimée en jQuery 1.9. mieux vaut utiliser .on()

[jocelyn77]

Merci je vais essayer ca, mais le probleme c'est que je suis obligé de rester en jquery 1.7, le .on() y est-il deja intégré?

[jocelyn77]

quand je déplace le focus apres l'animate j'ai effectivement un scroll mais celui du focus (scroll rapide par defaut) et non celui de l'animate

[kakashi99]

excuse moi, je l'avais commenté en fait

en fait il faut que tu attendes que l'animation soit fini pour faire le focus:

Code :

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

1
2
3
4
5
6
7
8
9
10
 
$('html,body').animate(
  {scrollTop:hauteur},
  {
    duration: 1000,
    complete: function() {
      $('#initiateur').focus();
    }
  }
);

et oui, .on() est dans la 1.7

[jocelyn77]

Merci pour toutes ces reponses, le scroll est toujours presque identique mais j'ai maintenn un temps d'attente de 1 seconde avant qu'il s'effectue .
soit cela marche et ma page n'est pas assez etendue pour faire un scroll normal soit cela ne fonctionne tjrs pas.

La fonction est bien censée resembler à ça? :

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
<script>
	jQuery(function($) {
		$('#form').on("submit", function(){
				if ($.trim($("#initiateur").val()).length == 0) { 	//test une chaine sans caractère plutot qu'un champ vide pour 
					alert('champ ini vide');							//eviter de considérer les espace ou les retour a la ligne.
					$('#initiateur').css('border-color','#8a1f11');
					hauteur=$('#initiateur').offset().top;
					$('html,body').animate(
						{scrollTop:hauteur},
						{
							duration: 1000,
							complete: function() {
							$('#initiateur').focus();
						}
						}
						);
					return false;
 
				};
				if ($.trim($("#changement").val()).length == 0) {
					alert('champ changement vide');
					$('#changement').css('border-color','#8a1f11');
					$('#changement').focus();
					hauteur=$('#changement').offset().top;
					$('html,body').animate({scrollTop:hauteur},1000);
					return false;
				};
 
			});
 
 
		//Partie datepicker
		$('#datecreation, #datedebut, #datefin').datepicker({
			dateFormat : 'yy-mm-dd' //permet a la bdd d'interpréter comme format date!
		});
 
	})
</script>

[kakashi99]

oui...

sur quel navigateur (quelle version) fais tu le test ?
est-ce que tu charges d'autres librairies javascript (qui pourrait modifier jQuery) ?

est-ce que tu as le même comportement si tu testes sur cette page : http://jsfiddle.net/2nww67kL/1/ ?

[jocelyn77]

malheureusement non je n'est pas le resultat comme sur jsfiddle.J'ai un scroll vers ancre classique sans l'effet "slow" que je recherche.Mais bon au moins sa veut dire que ca marche.
sur mon fichier j'ai effectivement pas mal de librairie jquery:

Code html :

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

1
2
3
4
5
6
7
<script src="/js/jquery-1.11.2.min.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery-1.7.1.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.core.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.widget.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.datepicker.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="/SuiviCAB/calendrier/css/style.css">

Pour ma version de navigateur c'est la version 34.0.5 de firefox .

[kakashi99]

peux-tu tester en ne laissant qu'un appel à un fichier jquery (soit la 1.11 soit la 7) histoire de voir si c'est un des .ui qui mais le bazar.

tu n'as que des librairies jquery ?

[jocelyn77]

j'ai testé avec les deux mais avec la 1.7 j'ai tjrs le probleme avec la 1.11 il ne detecte mm pas (j'ai peut etre mal indiqué le chemin) je l'ai donc testé avec la 1.11 de l'api google et j'ai aussi le probleme .

Ma page est intégrer dans un site joomla il y a donc un menu au dessus mais je ne pense pas que cela soit la cause des soucis ...

[kakashi99]

mais avais-tu commenté tous les autres import javascript ?

et tu ne m'as pas répondu, est-ce que tu importes d'autres fichiers javascript ? autres que jquery ?

[jocelyn77]

Oui j'ai effectivement mis tous les autres import en commentaire et non je n'importe pas d'autre choses

[kakashi99]

bah écoute,

la sans avoir plus d'accès au code, je ne vois plus trop ce que je peux faire pour toi...

peux-tu m'envoyer le lien que tu as utilisé pour tester avec la 1.11 ? as-tu essayer sur IE ou chrome ?

[jocelyn77]

Pour la 1.11 j'ai utilisé l'api google= <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> mais je test mon code tjrs sur firefox. sinon tant pis sa restera un mistère .

Mais si tu veux plus de precision je peut t'envoyer ma feuille de code en entier!

[kakashi99]

tu peux m'envoyer le tout si tu veux.

par contre, ok tu testes toujours sur firefox, mais as-tu tester sur d'autres navigateurs ? si non, fais le, au moins ça permettra d'être sur que le problème vient de ton code.
en tant qu'utilisateur tu peux avoir un navigateur préféré, en tant que dev web tu te dois de tester si différents produits.

[jocelyn77]

J'ai tester sur IE le problème est le meme.
Voici le code complet=

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
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
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html dir="ltr" xml:lang="fr" xmlns="http://www.w3.org/1999/xhtml" lang="fr">
 <?php
 session_start();
        mysql_connect('localhost', 'root', 'redhat');
        mysql_select_db('suivi_cab');
        mysql_query("SET NAMES 'utf8'"); 
        header('Content-Type: text/html; charset=UTF-8');
        $idArticles = $_GET['idCab'];
        $Dreq = "SELECT*FROM suivi_cab WHERE idCab = '$idArticles'" ;
 
        $Dsql = mysql_query( $Dreq ) or die($Dreq . mysql_error());
?>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 
 
<title>C.A.B - Vue du Changement</title>
 
 
	 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script src="/js/jquery-1.11.2.min.js"></script> 
	<script src="/SuiviCAB/calendrier/js/jquery-1.7.1.js"></script>
	<script src="/SuiviCAB/calendrier/js/jquery.ui.core.js"></script>
	<script src="/SuiviCAB/calendrier/js/jquery.ui.widget.js"></script>
	<script src="/SuiviCAB/calendrier/js/jquery.ui.datepicker.js"></script>
	<script src="/SuiviCAB/calendrier/js/jquery.ui.datepicker-fr.js"></script>
	<link rel="stylesheet" href="/SuiviCAB/calendrier/themes/ui-lightness/jquery.ui.all.css"> 
	<link rel="stylesheet" href="/SuiviCAB/calendrier/css/style.css">
 
<script>
        jQuery(function($) {
                $('#form').on("submit", function(){
                                if ($.trim($("#initiateur").val()).length == 0) {       //test une chaine sans caractère plutot qu'un champ vide pour 
                                        alert('champ ini vide');                                                        //eviter de considérer les espace ou les retour a la ligne.
                                        $('#initiateur').css('border-color','#8a1f11');
                                        hauteur=$('#initiateur').offset().top;
                                        $('html,body').animate(
                                                {scrollTop:hauteur},
                                                {
                                                        duration: 1000,
                                                        complete: function() {
                                                        $('#initiateur').focus();
                                                }
                                                }
                                                );
                                        return false;
                                        
                                };
                                if ($.trim($("#changement").val()).length == 0) {
                                        alert('champ changement vide');
                                        $('#changement').css('border-color','#8a1f11');
                                        $('#changement').focus();
                                        hauteur=$('#changement').offset().top;
                                        $('html,body').animate({scrollTop:hauteur},1000);
                                        return false;
                                };
                                
                        });
                
                
                //Partie datepicker
                $('#datecreation, #datedebut, #datefin').datepicker({
                        dateFormat : 'yy-mm-dd' //permet a la bdd d'interpréter comme format date!
                });
                
        })
</script> 
 
<style type="text/css"> 
 
h2{
margin-top:-10px;
color:#0837B0;
}
 
table input[type="text"]{
        width:95%;
}
 
.ombrage .colonne1{
        background-color:#95C4D7;
        padding:2px 0;
        text-align:right;
        width:30%;
}
 
.ombrage .colonne2{
        background-color:#95C4D7;
        padding:2px 0;
        padding-left:5px;
        text-align:left;
        width:25%;
}
 
.ombrage .colonne3{
        background-color:#95C4D7;
        padding:2px 0;
        padding-left:5px;
        text-align:left;
        width:55%;
}
 
.ombrage .colonne4{
        background-color:#95C4D7;
        padding:2px 0;
        padding-left:5px;
        text-align:left;
        width:25%;
}
 
 
.ombrage .colonne_colspan{
        background-color:#95C4D7;
        padding:2px 0;
        padding-left:5px;
        text-align:left;
        width:70%;
}
 
table td.validation{
        padding-top:8px;
        background-color:#95C4D7;
}
 
 
.ombrage{
        border:2px solid white;
}
 
.ombrage .input_autre{
        width:78%;
}
 
h4{
margin-top:0;
margin-bottom:6px;
}
</style>
<!--[if lte IE 8]>
			<style type="text/css">
				.ombrage {
					filter:progid:DXImageTransform.Microsoft.Glow(color='#000000', Direction=45, Strength=0.5),
					progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=3);
					zoom: 1;
					border:2px solid white;
					border-collapse:collapse;
				} 
				.ombrage th,.ombrage td {
					border:0px solid white;
				}
			</style>
		<![endif]-->
</head>
<body >
<center>
<?php
while($data = mysql_fetch_array($Dsql))
{
?>
 
	<h2>Modification du changement</h2>
 
 
	<form action="verif_modif.php" method="POST" id="form" >
		<table class="ombrage" border="0" cellspacing='0' cellpadding='0' width="90%;" style="box-shadow:2px 2px 4px black;" >
			<tr>
				<td class="colonne1" >
					<strong>ID : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text" name="id" value=<?php echo $data['idCab']; ?> readonly  >
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Date de création : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text" name="date-creation" id="datecreation" value=<?php echo $data['dateCreation']; ?>  >
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Référence : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text"  name="ref" id="reference" value=<?php echo $data['ref'];?> >
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Initiateur : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="ini" id="initiateur" rows="5" cols="50" ><?php echo $data['initiateur']; ?></textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Changement : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="changement" id="changement" rows="5" cols="50" ><?php echo $data['changement']; ?> </textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Porteur : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text" name="porteur" id="port" value=<?php echo $data['porteur']; ?> >
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Acteurs CESTIF : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text" name="acteur-cestif" id="acteurcestif" value=<?php echo $data['acteurCestif']; ?> >
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Description fonctionnelle : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="fonctionnelle" id="fonctionnelle" rows="5" cols="50" ><?php echo $data['descriptionFonct']; ?> </textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Date de début: </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text" name="date-debut" id="datedebut" value=<?php echo $data['dateDebut']; ?>>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Date de fin: </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<input type="text" name="date-cloture" id="datefin" value=<?php echo $data['dateCloture']; ?>>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Observations : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="obs" id="obs" rows="5" cols="50"><?php echo $data['commentaire']; ?> </textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Impact CESTIF : </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="impact-cestif" id="impactcestif" rows="5" cols="50"><?php echo $data['impactCestif']; ?> </textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Impact utilisateurs: </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="impact-user" id="impactuser" rows="5" cols="50"><?php echo $data['impactUser']; ?> </textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1" >
					<strong>Impact autres CSM: </strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<textarea type="text" name="impact-csm" id="impactcsm" rows="5" cols="50"><?php echo $data['impactCsm']; ?> </textarea>
				</td>
			</tr>
			<tr>
				<td class="colonne1">
					<strong>Etat du changement :</strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<select name="etat" id="etat">
						<option selected ><?php echo $data['etatChangement']; ?></option>
						<option value="A planifier">A planifier</option>
						<option value="A démarrer">A démarrer</option>
						<option value="En cours">En cours</option>
						<option value="Terminé">Terminé</option>
					</select>
				</td>
			</tr>
<!--
			<tr>
				<td class="colonne1">
					<strong>Type de travaux :</strong>
				</td>
				<td class="colonne_colspan" colspan="2" >
					<select name="Type_Travaux" id="Type_Travaux">
						<option value=""></option>
						<option value="Climatisation">Climatisation</option>
						<option value="Electricité">Electricité</option>
						<option value="Sanitaire">Sanitaire</option>
						<option value="Autre">Autre</option>
					</select>
				</td>
			<tr>
				<td class="colonne1" >
					<strong>Description de la demande :</strong>
				</td>
				<td class="colonne_colspan" colspan="2">
					<input type="text" name="description" >
				</td>
			</tr>
			<tr>
				<td class="colonne1">
					<strong>Urgence :</strong>
				</td>
				<td class="colonne_colspan" colspan="2">
					<select name="urgence" >
						<option value=""></option>
						<option value="Oui">Oui</option>
						<option value="Non">Non</option>
					</select>
				</td>
			</tr>
 
 
-->				
			<tr>
				<td style="padding-bottom:8px;" colspan="3" class="validation">
					<center><INPUT border="0" src="images/bouton_validation.png" type="image" Value="submit" ></center>
				</td>
			</tr>
		</table>
	</form>
 
<?php
}
?>
	<br/>
	<table> 
		<caption><h4 style="color:#8C8E91">Menu</h4></caption>
		<tr align="center">
			<td><a href="index.php"><br />Retour à l'accueil du<br />Suivi des CAB</a></td>					
		</tr>
	</table>
 
</center>
</body>
</html>

[kakashi99]

j'aurais préféré le code généré par le navigateur (sans le php), mais bon bref, après avoir supprimé tout le php, la page et le scroll lent fonctionne.

comme, je pense, la seule chose qui différente entre chez et chez moi c'est la non présence des autres includes, le problème vient surement de quelque part par la :

Code :

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

1
2
3
4
5
6
7
8
9
 
<script src="/js/jquery-1.11.2.min.js"></script> 
<script src="/SuiviCAB/calendrier/js/jquery-1.7.1.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.core.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.widget.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.datepicker.js"></script>
<script src="/SuiviCAB/calendrier/js/jquery.ui.datepicker-fr.js"></script>
<link rel="stylesheet" href="/SuiviCAB/calendrier/themes/ui-lightness/jquery.ui.all.css"> 
<link rel="stylesheet" href="/SuiviCAB/calendrier/css/style.css">

ps: on est d'accord qu'on test sur le champ "initiateur" et pas "changement" hein (étant donné que tu n'as pas fait la correction pour "changement") ?

[jocelyn77]

Oui désolé j'avais oulbié qu'il fallait seulement donner le code source généré et oui pour l'instant je ne test que sur le champ initiateur