jQuery UI“ $ (” # datepicker“) datepicker ไม่ใช่ฟังก์ชัน”

125

เมื่อฉันใช้ DatePicker ปลั๊กอิน UI ของ jQuery ในเพจ. aspx ที่มีอยู่ฉันได้รับข้อผิดพลาดที่:

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

อย่างไรก็ตามเมื่อฉันคัดลอกและวางโค้ดเดียวกับที่สร้างและใช้ datePicker ไปยังไฟล์ HTML ที่อยู่ในไดเร็กทอรีเดียวกันกับเพจ aspx มันก็ทำงานได้อย่างไม่มีที่ติ สิ่งนี้ทำให้ฉันคิดว่ามีไฟล์ JS บางไฟล์ในหน้า aspx ที่ป้องกันไม่ให้ datePicker หรืออาจจะโหลดไฟล์ UI JS ของ jQuery อย่างถูกต้อง

ใครสามารถยืนยันความเชื่อของฉันหรือให้คำแนะนำในการค้นหาผู้กระทำผิดที่รบกวนปลั๊กอิน UI ของ jQuery ได้หรือไม่

— burnt1ce
แหล่งที่มา

คุณช่วยโพสต์รหัส jQuery ที่เกี่ยวข้องได้ไหม

— Russ Cam

คุณรวมปลั๊กอิน datepicker ไว้ในหน้าอย่างไร - อยู่ใน ScriptManagerProxy หรือคุณเขียนลงในหน้าโดยตรง แน่ใจหรือว่ากำลังโหลด ถ้าเป็นเช่นนั้นคุณมีปลั๊กอินอะไรอีกบ้าง? แน่ใจหรือว่าได้ใส่ ui.core.js

— James Kolpack

12

ฉันพบปัญหา ฉันหวังว่าฉันจะพบวิธีแก้ปัญหานี้เมื่อวานนี้เนื่องจากคัดค้าน 1 ชั่วโมงหลังจากโพสต์คำถามนี้ โค้ด JS ที่ฉันเขียนอ้างอิงไฟล์ jQuery jQuery และ jQuery UI javascript ทำหน้าที่เป็นโมดูล ผู้ปกครองยังอ้างอิง jQuery ที่ด้านล่างของแท็กเนื้อหา (ดังนั้นการอ้างอิง 2 รายการถึง jQuery) เนื่องจาก jQuery ได้รับการกำหนดค่าเริ่มต้นใหม่หลังจาก jQuery UI ดังนั้น jQuery UI จึงถูกลบออกเป็นปลั๊กอินด้วยเหตุนี้รหัสของฉันจึงไม่พบปลั๊กอิน DatePicker

— burnt1ce

เนื่องจากฉันใช้ Webpack ฉันจึงต้องใช้ jquery-ui-bundle แทน stackoverflow.com/a/39230057/470749

— Ryan

210

ฉันต่อสู้กับปัญหาที่คล้ายกันมาหลายชั่วโมง ปรากฎว่า jQuery ถูกรวมสองครั้งโดยโปรแกรมที่ฉันเพิ่มฟังก์ชัน jQuery และครั้งเดียวโดยดีบักเกอร์ภายในของเรา

— Eugene van der Merwe
แหล่งที่มา

4

นี่เป็นปัญหาของฉันด้วย ฉันมีการอ้างอิงถึงไลบรารี jQuery ของฉันเองพร้อมกับ jQuery Tools CDN ซึ่งรวม jQuery โดยไม่รู้ตัว

— DavGarcia

นี่เป็นปัญหาของฉันด้วย ฉันใช้ superfish และมันก็โหลด jquery ด้วย ฉันไม่ได้สังเกตเห็นมันจนถึงตอนนี้

— rrtx2000

45

แล้วทางออกล่ะ?

— Henrique Ordine

8

@HenriqueOrdine ตรวจสอบอีกครั้งว่า jQuery ไม่รวมสองครั้งในหน้า

— Eugene van der Merwe

นี่เป็นปัญหาของฉันด้วย ฉันใช้สินทรัพย์ทั่วไปภายในไปป์ไลน์สินทรัพย์ทางรถไฟและทั้งประกาศ jquery ในไฟล์เมตาระดับบนสุดของฉัน (application.js) และมีไฟล์ jquery min ในโฟลเดอร์ JS ของฉัน ดับเบิลประกาศ ฉันเพิ่งลบคำประกาศ jquery

— Mario

38

หากมีไลบรารีอื่นที่ใช้ตัวแปร $ คุณสามารถทำได้:

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

ตรวจสอบให้แน่ใจว่ารวมจาวาสคริปต์ของคุณอยู่ในลำดับที่ถูกต้องดังนั้นจึงกำหนดไลบรารีหลัก jquery ก่อน jquery.ui ฉันมีปัญหาที่ทำให้เกิด

— MacAnthony
แหล่งที่มา

ตรวจสอบให้แน่ใจว่ารวมจาวาสคริปต์ของคุณอยู่ในลำดับที่ถูกต้องดังนั้นจึงกำหนดไลบรารีหลัก jquery ก่อน jquery.ui ฉันมีปัญหาที่ทำให้เกิด << นั่นคือคำตอบที่ถูกต้องสำหรับฉัน

— macaesar

22

ข้อผิดพลาดนี้มักจะปรากฏขึ้นเมื่อคุณไม่มีไฟล์จากชุด jQuery UI

ตรวจสอบอีกครั้งว่าคุณมีไฟล์ทั้งหมดไฟล์ jQuery UI ตลอดจน CSS และรูปภาพและอยู่ในตำแหน่งไฟล์ / ไดเร็กทอรีที่เชื่อมโยงอย่างถูกต้องบนเซิร์ฟเวอร์ของคุณ

— สุ่ม
แหล่งที่มา

คำตอบนี้ใกล้เคียงกับคำตอบที่ฉันโพสต์ที่สุด

— burnt1ce

หมายเหตุถึงตนเอง: ตรวจสอบให้แน่ใจว่าในการเปลี่ยนจากไฟล์ในเครื่องเป็นไฟล์ CDN ของ Google นั้นคุณมี URL ที่ถูกต้อง มันคือ ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js ไม่ใช่ ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery-ui.min.js ห้อยมัน

— neminem

17

jQuery“ $ (” # datepicker“). datepicker ไม่ใช่ฟังก์ชัน”

ฉันได้แก้ไขปัญหาโดยการวางไฟล์สามไฟล์ด้านล่างในส่วนเนื้อหาของแบบฟอร์มที่ส่วนท้าย

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

— กฤษณะ
แหล่งที่มา

1

คุณเป็นผู้ช่วยชีวิตอย่างใดคำตอบทั้งหมดนี่คือคำตอบที่ช่วยฉันหลังจาก 2 วันของการต่อสู้ไม่หยุดหย่อน

— Tejas Jaggi

8

หากคุณคิดว่ามีข้อขัดแย้งคุณสามารถใช้jQuery.noConflict()รหัสของคุณได้ โดยมีรายละเอียดในเอกสาร

การอ้างอิง MAGIC - ทางลัดสำหรับ JQUERY

หากคุณไม่ชอบพิมพ์ "jQuery" แบบเต็มตลอดเวลามีทางลัดอื่น ๆ :

กำหนด jQuery ใหม่เป็นทางลัดอื่น var $j = jQuery;(นี่อาจเป็นวิธีที่ดีที่สุดหากคุณต้องการใช้ไลบรารีอื่น) ใช้เทคนิคต่อไปนี้ซึ่งช่วยให้คุณสามารถใช้ $ ภายในบล็อกโค้ดโดยไม่ต้องเขียนทับ $ อย่างถาวร:

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

หมายเหตุ: หากคุณใช้เทคนิคนี้คุณจะไม่สามารถใช้เมธอด Prototype ภายในฟังก์ชั่นที่คาดว่า $ จะเป็น $ ของ Prototype ได้ดังนั้นคุณจึงเลือกใช้เฉพาะ jQuery ในบล็อกนั้น ใช้อาร์กิวเมนต์กับเหตุการณ์ DOM ready:

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

หมายเหตุ: อีกครั้งในบล็อกนั้นคุณไม่สามารถใช้เมธอด Prototype ได้

จากส่วนท้ายของเอกสารและอาจเป็นประโยชน์กับคุณ

— AutomatedTester
แหล่งที่มา

7

ไปให้ชัดเจนก่อน: คุณอ้างอิงไฟล์ jquery-ui.js ได้ดีหรือไม่?

ลองใช้แท็บเครือข่ายของ firebug เพื่อค้นหาว่ามีการโหลดหรือไม่หรือรหัสจาวาสคริปต์ Information \ View ของแถบเครื่องมือนักพัฒนาเว็บ

— eKek0
แหล่งที่มา

3

คุณได้ลองใช้ Firebug ถึง 1) ตรวจสอบว่าไม่มีข้อผิดพลาดของ Javascript และ 2) มีองค์ประกอบ #datepicker อยู่ในหน้านี้หรือไม่

เป็นไปได้มากว่าจะมีข้อผิดพลาดก่อนการเรียก datepicker ที่ขัดขวางการเรียกใช้ datepicker

— 1kevgriff
แหล่งที่มา

2

ฉันรู้ว่าโพสต์นี้ค่อนข้างเก่า แต่สำหรับการอ้างอิงฉันได้แก้ไขปัญหานี้โดยการอัปเดตเวอร์ชันของ datepicker

มันก็คุ้มค่าที่จะพยายามเช่นกันเพื่อหลีกเลี่ยงชั่วโมงของการดีบัก

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

— Yannickv
แหล่งที่มา

2

ไม่สามารถใช้ได้กับ Jquery UI datepicker Bootstrap datepicker เป็นสัตว์ที่แตกต่างกันโดยสิ้นเชิง

— RedSands

1

ฉันเพิ่งมีปัญหานี้และย้ายการอ้างอิง JS และโค้ดไปที่ด้านล่างของหน้าก่อนที่</body>แท็กจะแก้ไขให้ฉัน

— Banjer
แหล่งที่มา

1

ตรวจสอบสิทธิ์สำหรับไดเร็กทอรีที่คุณดาวน์โหลดไฟล์ ด้วยเหตุผลบางอย่างเมื่อฉันดาวน์โหลดสิ่งนี้โดยค่าเริ่มต้นมันจะถูกบันทึกไว้ในโฟลเดอร์ที่ไม่อนุญาตให้เข้าถึง! ต้องใช้เวลาตลอดไปในการคิดออกว่าเป็นปัญหา แต่ฉันต้องเปลี่ยนการอนุญาตสำหรับไดเร็กทอรีและเนื้อหา - ตั้งค่าให้ทุกคน = อ่านเท่านั้น ใช้งานได้ดีในขณะนี้

— Matthew Fries
แหล่งที่มา

1

ฉันพบปัญหานี้เมื่อเร็ว ๆ นี้ - ปัญหาคือฉันได้รวมไฟล์ jQuery UI ไว้ในแท็ก head แต่ไลบรารี Telerik ที่ฉันใช้รวม jQuery ไว้ที่ด้านล่างของแท็ก body (ดูเหมือนจะเริ่มต้น jQuery ใหม่และยกเลิกการโหลด UI ปลั๊กอินที่โหลดไว้ก่อนหน้านี้)

วิธีแก้ปัญหาคือค้นหาว่า jQuery ถูกรวมไว้ที่ไหนจริง ๆ และรวมถึงสคริปต์ jQuery UI หลังจากนั้น

0

ฉันเพิ่งพบปัญหาที่คล้ายกัน เมื่อฉันเปลี่ยนการอ้างอิงสคริปต์ของฉันจากแท็กปิดตัวเอง (เช่น<script src=".." />) เป็นโหนดว่าง (กล่าวคือ<script src=".."></script>) ข้อผิดพลาดของฉันหายไปและฉันก็สามารถอ้างอิงฟังก์ชัน jQuery UI ได้ในทันที

ในเวลานั้นฉันไม่ได้ตระหนักว่านี่เป็นเพียงการผายลมของฉันที่ไม่ได้ปิดมันอย่างถูกต้องเพื่อเริ่มต้น (ฉันโพสต์ข้อความนี้โดยบังเอิญว่ามีคนอื่นที่เข้ามาในกระทู้นี้กำลังมีปัญหาในลักษณะเดียวกัน)

— ปีเตอร์เนียร์
แหล่งที่มา

0

บางไฟล์ไม่โหลดก่อนที่คุณจะโทร

ตัวอย่างเช่นรหัสของคุณ:

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

เปลี่ยนเป็น:

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

— เดวิด Tsang
แหล่งที่มา

0

ฉันสามารถแก้ไขปัญหานี้ในการลบบันเดิล jquery บน _Layout.cshtml

หัวข้อ

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

ฟุตบอล

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

เปลี่ยนส่วนท้ายเป็น

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

— jaimenino
แหล่งที่มา

0

คุณลองใช้ $ ("# <% = txtDateElementId.ClientID%>"). datepicker (); แทนที่จะเป็น $ ("# txtDateElementId") datepicker (); เมื่อเลือกองค์ประกอบตาม ID โดยใช้ JQuery

— เอมิลฟิลิป
แหล่งที่มา

-1

ในกรณีของฉันมันได้รับการแก้ไขโดยการเปลี่ยนลำดับการนำเข้าของสคริปต์ต่อไปนี้: ก่อน (ไม่ทำงาน):

หลังจาก (ทำงาน):

— Matías W.
แหล่งที่มา