Atasi Error Uncaught TypeError: $(…).datepicker is not a function()

Saya menemukan beberapa jawaban pada stack overflow tetapi masih tidak dapat menyelesaikan masalah saya. Saya menjalankan Django tapi saya rasa ini tidak relevan untuk kesalahan ini.

Saya mencoba untuk membuat pekerjaan script java pemilih tanggal saya tetapi saya mendapatkan kesalahan

1:27 TypeError yang tidak ditangkap: $ (...). Datepicker bukan fungsi (fungsi anonim) @ 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 selesai memuat: 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 @ contentcript.js: 385processMutatedElements @ contentcript.js: 322

Ini semua skrip saya:

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

Umpan balik akan sangat dihargai.

Apa yang salah?

Saat Anda memasukkan jQuery pertama kali:

<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 kedua menghubungkan dirinya ke jQuery, dan "menambahkan" $(...).datepicker.

Tapi kemudian Anda memasukkan jQuery sekali lagi:

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

Ini membatalkan plugging in dan karenanya $(...).datepickermenjadi tidak terdefinisi.

Meskipun $(document).readyblok pertama muncul sebelum itu, badan fungsi panggil anonim tidak dieksekusi sampai semua skrip dimuat, dan pada saat itu $(...)( window.$tepatnya) mengacu pada jQuery yang baru saja dimuat.

Anda tidak akan mengalami hal ini jika Anda menelepon $('.dateinput').datepickerlangsung daripada di $(document).readycallback, tetapi kemudian Anda harus memastikan bahwa elemen target (dengan kelas dateinput) sudah ada dalam dokumen sebelum skrip, dan umumnya disarankan untuk menggunakan readycallback.

Solusi

Jika Anda ingin menggunakan datepickerdari jquery-ui, mungkin akan lebih masuk akal untuk memasukkan skrip jquery-ui setelah bootstrap. jquery-ui 1.11.4 kompatibel dengan jquery 1.6+ sehingga akan berfungsi dengan baik.

Atau (khususnya jika Anda tidak menggunakan jquery-ui untuk hal lain), Anda dapat mencoba bootstrap-datepicker.


Post a Comment

Previous Next

نموذج الاتصال