Uncaught TypeError: $ (...). Datepicker nie jest funkcją (funkcja anonimowa)

Question

Znalazłem kilka odpowiedzi na przepełnienie stosu, ale wciąż nie mogę rozwiązać mojego problemu. Używam Django, ale nie sądzę, że jest istotne dla tego błędu.

próbuję uczynić pracę mojego Date Picker skrypt java, ale jestem coraz Błąd

1:27 Uncaught TypeError. $ (...) datepicker nie jest funkcją (funkcja anonimowa) @ 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 XHR zakończyło ładowanie: 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

to wszystkie moje skrypty:

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

Wszelkie uwagi będą bardzo mile widziane

Answer 1

Co poszło nie tak?

Po dołączeniu jQuery po raz pierwszy:

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

Drugi skrypt podłącza się do jQuery, a "dodaje" $(...).datepicker.

Ale wtedy po raz kolejny w tym jQuery:

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

To Cofa podłączając i dlatego $(...).datepicker staje niezdefiniowane.

Chociaż pierwsza $(document).ready bloku pojawia się przed tym, anonimowy ciało funkcja zwrotna nie jest wykonywane, dopóki wszystkie skrypty są załadowane, i wtedy $(...) (window.$ być precyzyjne) odnosi się do ostatnio załadowanego jQuery.

Nie byłoby w tym jeśli nazywa $('.dateinput').datepicker natychmiast zamiast w $(document).ready zwrotnego, ale wtedy, że trzeba się upewnić, że element docelowy (z klasy dateinput) jest już w dokumencie przed skryptem, a to Ogólnie zaleca się korzystanie z oddzwaniania ready.

Rozwiązanie

Jeśli chcesz użyć datepicker z jQuery UI, to prawdopodobnie uczynić największy sens dołączyć jquery-ui skrypt po startowej. jquery-ui 1.11.4 jest kompatybilny z jquery 1.6+, więc będzie działał dobrze.

Alternatywnie (w szczególności, jeśli nie używasz jquery-ui dla czegokolwiek innego), możesz spróbować bootstrap-datepicker.

Answer 2

Ten błąd występuje, ponieważ funkcja nie jest zdefiniowana. W moim przypadku zadzwoniłem do funkcji datepicker bez uwzględniania pliku JS Datepicker, tym razem dostałem ten błąd.

Answer 3

Wystarczy dodać trzy pliki i dwa łącza css. Możesz także albo cdn. Linki do plików JS i pliki CSS są jako takie: -

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

są one ważne, jeżeli używasz bootstrap w projekcie.

Mam nadzieję, że to ci pomoże. Pozdrawiam, Vivek Singla

Answer 4

Błąd dlatego, że są w tym powiązań skryptów w dwóch miejscach, które zrobi przesłanianie i ponownego uruchomienia data-kompletacji

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

Tak wykluczyć, SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"

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

będzie działać ..