Giao diện người dùng jQuery $ $ (NGÀY # datepicker). Datepicker không phải là một chức năng

Khi tôi sử dụng DatePicker, plugin UI của jQuery, trong trang .aspx hiện có, tôi gặp lỗi:

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

Tuy nhiên, khi tôi sao chép và dán cùng một mã tạo và sử dụng datePicker vào một tệp HTML cũng nằm trong cùng thư mục với trang aspx, nó hoạt động hoàn hảo. Điều này dẫn đến tôi giả định rằng có một số tệp JS trong trang aspx đang ngăn các tệp tin UI UI của jQuery hoặc có thể tải đúng cách.

Bất cứ ai cũng có thể xác nhận niềm tin của tôi hoặc cung cấp bất kỳ lời khuyên nào về việc tìm ra thủ phạm can thiệp vào các trình cắm UI của jQuery?

Tôi vật lộn với một vấn đề tương tự trong nhiều giờ. Sau đó, hóa ra jQuery đã được đưa vào hai lần, một lần bởi chương trình mà tôi đã thêm một hàm jQuery vào và một lần bởi trình gỡ lỗi nội bộ của chúng tôi.

Nếu có một thư viện khác đang sử dụng biến $, bạn có thể làm điều này:

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

Ngoài ra, hãy đảm bảo javascript của bạn bao gồm theo đúng thứ tự để thư viện lõi jquery được xác định trước jquery.ui. Tôi đã có vấn đề gây ra.

Lỗi này thường xuất hiện khi bạn thiếu một tệp từ bộ UI UI.

Kiểm tra kỹ xem bạn có tất cả các tệp, tệp UI UI cũng như CSS và hình ảnh hay không và chúng có ở vị trí thư mục / tệp được liên kết chính xác trên máy chủ của bạn không.

jQuery chín $ (NGÀY # datepicker Phúc). datepicker không phải là một hàm

Tôi đã khắc phục vấn đề bằng cách đặt ba tệp bên dưới vào phần thân của biểu mẫu ở cuối.

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

Nếu bạn nghĩ rằng có một xung đột, bạn có thể sử dụng jQuery.noConflict()mã của mình. Chi tiết có trong tài liệu .

TÀI LIỆU THAM KHẢO - SHORTCUTS CHO JQUERY

Nếu bạn không thích gõ "jQuery" đầy đủ mọi lúc, có một số phím tắt thay thế:

Tái chỉ định jQuery sang một lối tắt khác var $j = jQuery;(Đây có thể là cách tiếp cận tốt nhất nếu bạn muốn sử dụng các thư viện khác nhau) Sử dụng kỹ thuật sau, cho phép bạn sử dụng $ bên trong một khối mã mà không ghi đè vĩnh viễn $:

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

Lưu ý: Nếu bạn sử dụng kỹ thuật này, bạn sẽ không thể sử dụng các phương thức Prototype bên trong hàm được mã hóa này, dự kiến ​​$ sẽ là $ của Prototype, vì vậy bạn có lựa chọn chỉ sử dụng jQuery trong khối đó. Sử dụng đối số cho sự kiện sẵn sàng DOM:

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

Lưu ý: Một lần nữa, bên trong khối đó, bạn không thể sử dụng các phương thức Prototype

Đó là từ cuối của các tài liệu và có thể hữu ích cho bạn

Trước tiên hãy rõ ràng: Bạn có tham khảo tốt tệp jquery-ui.js không?

Hãy thử sử dụng tab mạng của fireorms để tìm xem nó đã được tải hay Thông tin \ Xem mã javascript của Thanh công cụ dành cho nhà phát triển web.

Bạn đã thử sử dụng Fireorms đến 1) xác định rằng không có lỗi Javascript và 2) rằng phần tử #datepicker tồn tại trên trang?

Nhiều khả năng có lỗi xảy ra trước cuộc gọi hẹn hò đang ngăn cuộc gọi hẹn hò thực hiện.

Tôi biết rằng bài đăng này khá cũ, nhưng để tham khảo tôi đã khắc phục vấn đề này bằng cách cập nhật phiên bản của datepicker

Điều đáng để thử là quá để tránh hàng giờ gỡ lỗi.

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

Tôi vừa gặp vấn đề này, và di chuyển các tham chiếu và mã JS xuống cuối trang trước khi </body>thẻ sửa nó cho tôi.

Đồng thời kiểm tra các quyền cho thư mục bạn tải các tệp vào. Vì một số lý do khi tôi tải xuống cái này, theo mặc định, nó đã được lưu trong một thư mục không cho phép truy cập! Phải mất mãi để nhận ra đó là vấn đề, nhưng tôi chỉ phải thay đổi quyền cho thư mục và nội dung của nó - đặt nó sao cho MỌI NGƯỜI = CHỈ ĐỌC. Hoạt động tuyệt vời bây giờ.

Gần đây tôi gặp phải vấn đề này - vấn đề là tôi đã bao gồm các tệp UI UI trong thẻ head, nhưng thư viện Telerik tôi đang sử dụng bao gồm jQuery ở dưới cùng của thẻ body (do đó rõ ràng là khởi tạo lại jQuery và dỡ bỏ UI các plugin đã tải trước đó).

Giải pháp là tìm ra nơi jQuery thực sự được đưa vào, và bao gồm các tập lệnh UI jQuery sau đó.

Tôi chỉ gặp phải một vấn đề tương tự. Khi tôi thay đổi tham chiếu tập lệnh của mình từ các thẻ tự đóng (nghĩa là <script src=".." />) sang các nút trống (nghĩa là <script src=".."></script>) , các lỗi của tôi đã biến mất và tôi có thể đột nhiên tham chiếu các hàm UI của jQuery.

Vào thời điểm đó, tôi đã không nhận ra rằng đây chỉ là một trò chơi trí tuệ của tôi không đóng nó đúng cách để bắt đầu. (Tôi đang đăng bài này chỉ đơn giản là có khả năng bất kỳ ai khác gặp phải chủ đề này đều gặp vấn đề tương tự.)

Một số tập tin không tải trước khi bạn gọi.

Ví dụ: Mã của bạn:

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

Thay đổi thành này:

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

Tôi có thể khắc phục sự cố này khi xóa gói jquery trên _Layout.cshtml

Tiêu đề

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

Chân trang

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

Thay đổi chân trang thành

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

Bạn đã thử sử dụng $ ("# <% = txtDateEuityId.ClientID%>"). Datepicker (); thay vì $ ("# txtDateEuityId"). datepicker (); khi chọn một phần tử bằng ID bằng JQuery.

Trong trường hợp của tôi, nó đã được giải quyết bằng cách thay đổi thứ tự nhập của các tập lệnh sau: Before (Không hoạt động):

Sau khi làm việc):