web-dev-qa-db-fra.com

ReferenceError: $ n'est pas défini

J'ai ce message d'erreur ReferenceError: $ is not defined
.__ Ceci est mon en-tête.

<link href="css/global-style.css" rel="stylesheet" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" media="screen" href="css/datepicker3.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="assets/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datepicker.js"></script>

Voici mon code JavaScript

<script type="text/javascript">
$('#sandbox-container .input-daterange').datepicker({
    startDate: "today",
    calendarWeeks: true,
    todayHighlight: true
});
</script>

Voici le HTML

<div class="col-md-12" id="sandbox-container">
    <label>Project Duration</label>
    <div class="input-daterange input-group" id="datepicker">
            <input type="text" class="input-md form-control" name="start" />
            <span class="input-group-addon">to</span>
            <input type="text" class="input-md form-control" name="end" />
    </div>
</div>

Je veux afficher datepicker sur la balise input.
J'utilise Bootstrap V3.1.
J'utilise this datepicker

javascriptjqueryhtml
40
Shahab

Ajoutez la bibliothèque jQuery avant votre script qui utilise $ ou jQuery afin que $ puisse être identifié dans les scripts.

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
95
mrsrinivas

Utilisez Google CDN pour un chargement rapide:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
12
Dinesh Saini

Ajoutez ce script dans la balise head:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
7
Umesh Kumar

jQuery est une bibliothèque JavaScript. L'objectif de jQuery est de rendre le code beaucoup plus facile à utiliser JavaScript.

La syntaxe jQuery est faite sur mesure pour la sélection, un signe $ pour définir/accéder à jQuery.

Sa dans la déclaration séquence doit être au-dessus puis tout autre script inclus qui utilise jQuery

Position correcte sur la déclaration jQuery:  

$(document).ready(function(){
    console.log('hi from jQuery!');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>

L'exemple ci-dessus fonctionnera parfaitement car la bibliothèque jQuery est initialisée avant toute autre bibliothèque utilisant des fonctions jQuery, y compris $

Mais si vous l'appliquez ailleurs, les fonctions jQuery ne seront pas initialisées dans le DOM du navigateur et il ne sera pas en mesure d'identifier le code associé à jQuery. Son code commence par le signe $ et vous recevrez l'erreur $ is not a function.

Position incorrecte pour la déclaration jQuery: 

$(document).ready(function(){
    console.log('hi from jQuery!');
});
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Le code ci-dessus ne fonctionnera pas car jQuery n'est pas déclaré en haut d'une bibliothèque qui utilise la fonction jQuery ready.

0
saAction

C’est l’une des erreurs les plus courantes commises par tout le monde lors de l’utilisation de jQuery. Fondamentalement, $ est un alias de jQuery (). Par conséquent, lorsque vous essayez d’appeler/d’y accéder avant de déclarer que la fonction lève cette erreur.

Les raisons pourraient être

1) Le chemin d'accès à la bibliothèque jQuery que vous avez incluse n'est pas correct.

2) Ajout de la bibliothèque après le script si vous voyez cette erreur 

Pour résoudre cela 

Chargez la bibliothèque jquery au début de tous vos fichiers/scripts javascript.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
0
Praveen Govind