jQuery UI "$ (" # datepicker "). datepicker bukan fungsi"

125

Ketika saya menggunakan DatePicker, plugin UI jQuery, di halaman .aspx yang ada, saya mendapatkan kesalahan bahwa:

$("#datepicker").datepicker is not a function

Namun, ketika saya menyalin dan menempelkan kode yang sama yang membuat dan menggunakan datePicker ke file HTML yang juga ada di direktori yang sama dengan halaman aspx, ia bekerja dengan sempurna. Ini membuat saya berasumsi bahwa ada beberapa file JS di halaman aspx yang mencegah datePicker atau mungkin file JS JS UI jQuery dimuat dengan benar.

Adakah yang bisa mengkonfirmasi keyakinan saya atau memberikan tip tentang menemukan pelakunya yang mengganggu plugin UI jQuery?

burnt1ce
sumber
Bisakah Anda memposting kode jQuery yang relevan, silakan
Russ Cam
Bagaimana Anda memasukkan plugin datepicker pada halaman - apakah itu dalam ScriptManagerProxy atau Anda menulisnya langsung ke halaman? Apakah Anda yakin sedang dimuat? Jika ya, plugin apa yang Anda sertakan? Apakah Anda yakin Anda termasuk ui.core.js?
James Kolpack
12
Saya menemukan masalahnya. Saya berharap saya telah menemukan solusi ini kemarin sebagai lawan 1 jam setelah memposting pertanyaan ini. Kode JS yang telah saya tulis referensi file javascript jQuery dan jQuery UI bertindak sebagai modul. Induknya juga mereferensikan jQuery di bagian bawah tag body (jadi 2 referensi ke jQuery). Karena jQuery diinisialisasi ulang setelah jQuery UI, jQuery UI dihilangkan sebagai plugin, maka mengapa kode saya tidak dapat menemukan plugin DatePicker.
burnt1ce
Karena saya menggunakan Webpack, saya harus menggunakan jquery-ui-bundle sebagai gantinya. stackoverflow.com/a/39230057/470749
Ryan

Jawaban:

210

Saya berjuang dengan masalah yang sama selama berjam-jam. Kemudian ternyata jQuery dimasukkan dua kali, satu kali oleh program yang saya tambahkan fungsi jQuery dan satu kali oleh in-house debugger kami.

Eugene van der Merwe
sumber
4
Ini juga masalah saya. Saya punya referensi ke perpustakaan jQuery saya sendiri bersama dengan jQuery Tools CDN yang tanpa sadar termasuk jQuery.
DavGarcia
Ini juga masalah saya. Saya menggunakan superfish dan juga memuat jquery. Saya tidak menyadarinya sampai sekarang.
rrtx2000
45
Lantas apa solusinya?
Henrique Ordine
8
@ HenriqueOrdine periksa apakah jQuery tidak termasuk dua kali pada halaman.
Eugene van der Merwe
Ini juga masalah saya. Saya menggunakan aset umum dalam pipa aset rel dan keduanya menyatakan jquery dalam file meta tingkat atas (application.js) DAN memiliki file min jquery di folder JS saya. Deklarasikan ganda. Saya baru saja menghapus deklarasi jquery.
Mario
38

Jika ada perpustakaan lain yang menggunakan $ variabel, Anda bisa melakukan ini:

var $j = jQuery.noConflict();
$j("#datepicker").datepicker();

Pastikan juga javascript Anda termasuk dalam urutan yang benar sehingga pustaka inti jquery ditentukan sebelum jquery.ui. Saya punya masalah penyebab itu.

MacAnthony
sumber
Pastikan juga javascript Anda termasuk dalam urutan yang benar sehingga pustaka inti jquery ditentukan sebelum jquery.ui. Saya punya masalah penyebab itu << itu jawaban yang benar untuk saya.
macaesar
22

Kesalahan ini biasanya muncul ketika Anda kehilangan file dari set UI jQuery.

Periksa ulang apakah Anda memiliki semua file, file UI jQuery serta CSS dan gambar, dan bahwa file tersebut berada di lokasi file / direktori yang terhubung dengan benar di server Anda.

acak
sumber
Jawaban ini paling dekat dengan solusi yang saya posting.
burnt1ce
Catatan untuk diri sendiri: pastikan bahwa dalam beralih dari file lokal ke file CDN google, bahwa Anda benar-benar memiliki url yang tepat. Ini ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js, bukan ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js, dang itu.
neminem
17

jQuery "$ (" # datepicker "). datepicker bukan fungsi"

Saya telah memperbaiki masalah ini dengan menempatkan tiga file di bawah ini di bagian tubuh formulir di akhir.

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />
Krishna
sumber
1
Anda adalah penyelamat hidup, entah bagaimana dari semua jawaban, itu adalah yang menyelamatkan saya setelah 2 hari perjuangan tanpa henti.
Tejas Jaggi
8

Jika Anda berpikir bahwa ada konflik yang dapat Anda gunakan jQuery.noConflict()dalam kode Anda. Detail ada di dokumen .

REFERENSI MAGIC - SHORTCUTS UNTUK JQUERY

Jika Anda tidak suka mengetik "jQuery" penuh sepanjang waktu, ada beberapa pintasan alternatif:

Tetapkan ulang jQuery ke pintasan lain var $j = jQuery;(Ini mungkin pendekatan terbaik jika Anda ingin menggunakan pustaka yang berbeda) Gunakan teknik berikut ini, yang memungkinkan Anda untuk menggunakan $ di dalam blok kode tanpa secara permanen menimpa $:

(function($) { /* some code that uses $ */ })(jQuery)

Catatan: Jika Anda menggunakan teknik ini, Anda tidak akan dapat menggunakan metode Prototipe di dalam fungsi capsuled ini yang mengharapkan $ menjadi $ Prototipe, jadi Anda membuat pilihan untuk menggunakan hanya jQuery di blok itu. Gunakan argumen untuk acara siap DOM:

jQuery(function($) { /*some code that uses $ */ });

Catatan: Sekali lagi, di dalam blok itu Anda tidak dapat menggunakan metode Prototipe

Itulah dari akhir dokumen dan mungkin bermanfaat bagi Anda

AutomaticTester
sumber
7

Pergi untuk yang jelas pertama: Apakah Anda mereferensikan dengan baik file jquery-ui.js?

Coba gunakan tab jaringan pembakar untuk menemukan apakah itu dimuat, atau informasi \ Lihat kode javascript dari Bilah Alat Pengembang Web.

eKek0
sumber
3

Sudahkah Anda mencoba menggunakan Firebug untuk 1) menentukan bahwa tidak ada kesalahan Javascript dan 2) bahwa elemen #datepicker ada di halaman?

Kemungkinan besar ada kesalahan sebelum panggilan datepicker yang mencegah panggilan datepicker dari mengeksekusi.

1kevgriff
sumber
2

Saya tahu bahwa posting ini cukup lama, tetapi untuk referensi saya memperbaiki masalah ini dengan memperbarui versi datepicker

Perlu dicoba juga untuk menghindari berjam-jam debugging.

https://cdnjs.com/libraries/bootstrap-datepicker

Yannickv
sumber
2
Ini tidak berlaku untuk Jepery UI datepicker. Bootepap datepicker adalah binatang yang sama sekali berbeda.
RedSands
1

Saya baru saja mengalami masalah ini, dan memindahkan referensi dan kode JS ke bagian bawah halaman sebelum </body>tag memperbaikinya untuk saya.

Banjer
sumber
1

Periksa juga izin untuk direktori tempat Anda mengunduh file. Untuk beberapa alasan ketika saya mengunduh ini, secara default itu disimpan dalam folder tanpa akses! Butuh selamanya untuk mencari tahu itu masalahnya, tapi aku hanya harus mengubah izin untuk direktori dan isinya - mengaturnya jadi SEMUA ORANG = BACA HANYA. Bagus sekali sekarang.

Matthew Fries
sumber
1

Saya mengalami masalah ini baru-baru ini - masalahnya adalah bahwa saya telah memasukkan file jQuery UI di tag kepala, tetapi perpustakaan Telerik yang saya gunakan termasuk jQuery di bagian bawah tag tubuh (sehingga tampaknya menginisialisasi ulang jQuery dan membongkar UI) plugin yang sebelumnya dimuat).

Solusinya adalah untuk mengetahui di mana sebenarnya jQuery dimasukkan, dan termasuk skrip UI jQuery setelah itu.


sumber
0

Saya hanya mengalami masalah serupa. Ketika saya mengubah referensi skrip saya dari tag yang menutup sendiri (yaitu, <script src=".." />) ke node kosong (yaitu,<script src=".."></script> ) kesalahan saya hilang dan tiba-tiba saya bisa merujuk fungsi jQuery UI.

Pada saat itu, saya tidak menyadari ini hanya kentut otak saya yang tidak menutupnya dengan benar. (Saya memposting ini hanya jika ada orang lain yang mengalami masalah serupa.)

Peter Bernier
sumber
0

Beberapa file tidak dimuat sebelum Anda menelepon.

Misalnya: Kode Anda:

<%= javascript_include_tag "distpicker.min" %>
<%= javascript_include_tag "distpicker.data.min" %>

Ubah ini:

<%= javascript_include_tag "distpicker.data.min" %>
<%= javascript_include_tag "distpicker.min" %>
David tsang
sumber
0

Saya bisa memperbaiki masalah ini dengan menghapus bundel jquery di _Layout.cshtml

Header

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/kendo/2015.2.902/kendo.all.min.js"></script>
    ...

Footer

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

Ubah footer ke

    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
jaimenino
sumber
0

Sudahkah Anda mencoba menggunakan $ ("# <% = txtDateElementId.ClientID%>"). Datepicker (); bukannya $ ("# txtDateElementId"). datepicker (); saat memilih elemen dengan ID menggunakan JQuery.

Emil Filip
sumber
-1

Dalam kasus saya, ini diselesaikan dengan mengubah urutan impor skrip berikut: Sebelum (Tidak berfungsi):

Setelah bekerja):

Matías W.
sumber