Déplacer le code js dans le head de la page

Version imprimable

Bonjour,
j'ai un script qui contient un datepicker (compatible avec Bootstrap), et pour pouvoir l'utiliser, j'ai besoin de déplacer la partie js dans le head. Cependant, il semble que l'ordre des instructions du code est importante, car si je place le js avant le html, ça ne marche plus (le calendrier censé apparaître quand on clique sur le champ n'apparaît pas). Est-ce une obligation ou y a-t-il moyen de déplacer le code js ?

code fonctionnel HTML et JavaScript :

Code:

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!--obligatoire pour tout projet bootstrap-->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">
 
    <title>Bootstrap squelette</title>
 
    <!-- Bootstrap core CSS (acces au cdn, donc css non chargé mais en ligne) -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
 
 
 
  </head>
 
  <body>
 
 
<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">
<script>
(function($){
$.fn.datepicker.dates['fr'] = {
days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
today: "Aujourd'hui",
monthsTitle: "Mois",
clear: "Effacer",
weekStart: 1,
format: "dd/mm/yyyy"
};
}(jQuery));
 
 
 
$('.datepicker').datepicker({
language: 'fr',
autoclose: true,
todayHighlight: true
})
</script>
 
 
    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
 
  </body>
</html>

code non fonctionnel :

Code:

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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
<script>
                (function($){
                $.fn.datepicker.dates['fr'] = {
                days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
                daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
                daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
                months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
                monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
                today: "Aujourd'hui",
                monthsTitle: "Mois",
                clear: "Effacer",
                weekStart: 1,
                format: "dd/mm/yyyy"
                };
                }(jQuery));
 
 
 
                $('.datepicker').datepicker({
                language: 'fr',
                autoclose: true,
                todayHighlight: true
                })
                </script>
 
</head>
<body>       
 
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>   
 
<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">
 
 
</body>
 
</html>

Bonjour Laurent,

je te l'ai déjà dit...

Tu ne peux pas faire appel à des scripts qui nécessitent jQuery / bootstrap-datepicker / ... tant que tu n'as pas initialisé ces bibliothèques JS.

Il faut donc placer tes scripts JS APRES :
Code:

1 2 3 4 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>

OK,

quand tu me l'auras dit 10 fois, je pense retenir :D

Néanmoins, je viens de faire une page de test qui respecte cette règle, et le calendrier n'apparaît toujours pas :aie:

Code:

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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
 
 
</head>
<body>       
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
 
<script>
        
        (function($){
                $.fn.datepicker.dates['fr'] = {
                days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
                daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
                daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
                months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
                monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
                today: "Aujourd'hui",
                monthsTitle: "Mois",
                clear: "Effacer",
                weekStart: 1,
                format: "dd/mm/yyyy"
                };
                }(jQuery));
 
 
 
                $('.datepicker').datepicker({
                language: 'fr',
                autoclose: true,
                todayHighlight: true
                }):
        </script>
 
 
	<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">              
 
</body>
 
</html>

Comme dit (toujours TRES justement CosmoKnacki ;)), il faut ajouter systématiquement :
Code:

1 2 3 $(document).ready(function(){ // signifie : QUAND LE DOM EST PRET (= APRES chargement de la page) ... });
:alerte: Attention en cas de codes HTML AJOUTES VIA AJAX (car les éléments ajoutés ne sont PAS présents dans le DOM au chargement de la page !) :
il faut alors RAPPELER LES SCRIPTS nécessaires pour CES éléments !

Et comme NON-dit :aie::

Code:

<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">

N'a RIEN à faire EN FIN de fichier.... (en tout cas, PAS APRES les appels aux scripts...)

:alerte: OU Placer ces scripts d'initialisation DANS LE <head> ! (AVANT TOUT autre appel à des scripts JS...)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head>   <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>   </head>

25/04/2019, 18h04
CosmoKnacki
Ça ne marche pas car ton code JQuery fait référence à des éléments html qui ne sont pas encore disponibles au moment de son exécution (du simple fait que le code JQuery est placé avant ton élément input avec la classe datepicker). Pour changer ça, il faut s'assurer que le DOM (l'arbre HTML) soit chargé avant, dans ton cas il suffit de changer:
Code:

1 2 3 4 5 $('.datepicker').datepicker({ language: 'fr', autoclose: true, todayHighlight: true }):
par:
Code:

1 2 3 4 5 6 7 $(document).ready(function(){ $('.datepicker').datepicker({ language: 'fr', autoclose: true, todayHighlight: true }); });
L'autre solution consiste comme tu as pu le constater à placer tout le Javascript à la fin.

Bonsoir,

j'ai suivi (je pense) tous les conseils reçus, mais le problème reste…

Code:

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>               
</head>
<body>       
 
 
<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">   
 
<script>
        $(document).ready(function(){ // signifie : QUAND LE DOM EST PRET (= APRES chargement de la page)
 
                $.fn.datepicker.dates['fr'] = {
                days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
                daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
                daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
                months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
                monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
                today: "Aujourd'hui",
                monthsTitle: "Mois",
                clear: "Effacer",
                weekStart: 1,
                format: "dd/mm/yyyy"
                };
                }(jQuery));
 
 
 
                $('.datepicker').datepicker({
                language: 'fr',
                autoclose: true,
                todayHighlight: true
                }):
        </script>
 
 
 
</body>
 
</html>

Code:

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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"rel="stylesheet">
 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<script>
// ici on se fiche que le DOM soit chargé ou pas car il n'y a aucune référence aux éléments de la page html
(function($) {
    $.fn.datepicker.dates['fr'] = {
        days: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"],
        daysShort: ["dim.", "lun.", "mar.", "mer.", "jeu.", "ven.", "sam."],
        daysMin: ["d", "l", "ma", "me", "j", "v", "s"],
        months: ["janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre"],
        monthsShort: ["janv.", "févr.", "mars", "avril", "mai", "juin", "juil.", "août", "sept.", "oct.", "nov.", "déc."],
        today: "Aujourd'hui",
        monthsTitle: "Mois",
        clear: "Effacer",
        weekStart: 1,
        format: "dd/mm/yyyy"
    };
}(jQuery));
 
// mais par contre ici tu as une référence à un élément ayant la class "datepicker" (ton input)
// donc là il faut que cette partie du code ne soit lancée qu'une fois le DOM chargé.
$(document).ready(function(){
    $('.datepicker').datepicker({ // <-- ici $('.datepicker')
        language: 'fr',
        autoclose: true,
        todayHighlight: true
    }); // ici c'est un point virgule, et pas deux points
}); // on s'assure que toutes les parenthèses et accolades sont bien appairées
</script>
</head>
<body> 
 
	<input type="text" class="form-control datepicker" placeholder="sélectionnez une date">              
 
</body>
</html>

25/04/2019, 22h31
laurentSc

Bien vu les 2 points au lieu du point-virgule. J'ai juste corrigé ça dans mon code et il marche !