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

**laurentSc** · 25/04/2019, 15h12

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 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
<!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 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
<!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>

Invité · 25/04/2019, 16h07

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 :

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

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>

**laurentSc** · 25/04/2019, 17h16

OK,

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

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

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
<!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>

**CosmoKnacki** · 25/04/2019, 18h04

Ç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 :

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

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

par:

Code :

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

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.

Invité · 25/04/2019, 18h04

Comme dit (toujours TRES justement CosmoKnacki

), il faut ajouter systématiquement :

Code :

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

1
2
3
$(document).ready(function(){ // signifie : QUAND LE DOM EST PRET (= APRES chargement de la page)
...
});

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

:

Code HTML :

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

	<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...)

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

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
<!DOCTYPE html>
<html>
<head>
<!-- ......... -->
 
<!-- INITIALISATION des scripts JS :  jQuery, Bootstrap,...  -->
<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>
 
<!-- AUTRES SCRIPTS ICI -->
<!-- ......... -->
 
</head>

**laurentSc** · 25/04/2019, 21h41

Bonsoir,

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

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
 
<!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>

**CosmoKnacki** · 25/04/2019, 22h09

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
<!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>

**laurentSc** · 25/04/2019, 22h31

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

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

jQuery

Discussions similaires

Partager

Partager