web-dev-qa-db-fra.com

TypeError non capturé: $ (...). Datepicker n'est pas une fonction (fonction anonyme)

J'ai trouvé peu de réponses sur le dépassement de capacité de la pile, mais je ne parviens toujours pas à résoudre mon problème ... Je tourne sous Django, mais je ne pense pas que cela soit pertinent pour cette erreur.

J'essaie de faire fonctionner mon script Java du sélecteur de dates mais je reçois le message d'erreur 

1:27 Uncaught TypeError: $ (...) datepicker n'est pas une fonction (fonction anonyme) @ 1: 27fire @ jquery-1.9.1.js: 1037self.fireWith @ jquery-1.9.1.js: 1148jQuery.extend .ready @ jquery-1.9.1.js: 433completed @ jquery-1.9.1.js: 103 jquery-2.1.0.min.js: 4 Le chargement XHR terminé: POST " https: // localhost: 26143/skypectoc/v1/pnr/parse ". l.cors.a.crossDomain.send @ jquery-2.1.0.min.js: 4o.extend.ajax @ jquery-2.1.0.min .js: 4PNR.findNumbers @ pnr.js: 43parseContent @ contentscript.js: 385processMutatedElements @ contentscript.js: 322

Ceci est tous mes scripts:

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

<script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
<script src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="http://getbootstrap.com/assets/js/vendor/holder.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="http://getbootstrap.com/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script type="text/javascript">
              $(document).ready(function() {
                  $("#extra-content").hide();
                  $("#toggle-content").click(function(){
                      $("#extra-content").toggle();
                  });
              });
 </script>

tout retour sera très apprécié 

javascriptjquerydjangodatepicker
14
Ilya Bibik

Qu'est ce qui ne s'est pas bien passé?

Lorsque vous incluez jQuery pour la première fois:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

Le second script se connecte à jQuery et "ajoute" $(...).datepicker.

Mais alors vous incluez encore une fois jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Cela annule le branchement et donc $(...).datepicker devient indéfini.

Bien que le premier bloc $(document).ready apparaisse avant cela, le corps de la fonction de rappel anonyme n'est pas exécuté tant que tous les scripts ne sont pas chargés. De ce fait, $(...) (window.$ pour être précis) fait référence au dernier jQuery chargé.

Vous ne rencontreriez pas cela si vous appeliez $('.dateinput').datepicker immédiatement plutôt que dans le rappel $(document).ready, mais vous devrez alors vous assurer que l'élément cible (avec la classe dateinput) est déjà dans le document avant le script, et il est généralement conseillé d'utiliser le callback ready.

Solution

Si vous voulez utiliser datepicker à partir de jquery-ui, il serait probablement plus logique d’inclure le script jquery-ui after bootstrap. jquery-ui 1.11.4 est compatible avec jquery 1.6+ et fonctionnera donc correctement.

Alternativement (en particulier si vous n'utilisez pas jquery-ui pour autre chose), vous pouvez essayer bootstrap-datepicker .

48
szym

L'erreur est due au fait que vous incluez les liens de script à deux endroits qui effectueront le remplacement et la réinitialisation du sélecteur de date.

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />


<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('.dateinput').datepicker({ format: "yyyy/mm/dd" });
}); 
</script>

      <!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>

Donc, excluez soit src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

or src = "http://code.jquery.com/ui/1.11.0/jquery-ui.js"

Ça va marcher..

0
anvesh

L'inclusion de plus d'une référence à la bibliothèque Jquery est la raison de l'erreur Uniquement inclure une référence à la bibliothèque Jquery et cela résoudra le problème

0
Joktan Okpanachi

Vous devez juste ajouter trois fichiers et deux liens CSS. Vous pouvez aussi bien soit cdn . Les liens pour les fichiers js et css sont en tant que tels: - 

  1. jQuery.dataTables.min.js
  2. dataTables.bootstrap.min.js
  3. dataTables.bootstrap.min.css
  4. bootstrap-datepicker.css
  5. bootstrap-datepicker.js

Ils sont valides si vous utilisez bootstrap dans votre projet.

J'espère que cela va vous aider ... Amicalement, Vivek Singla

0
user8994237