Giải thích giúp mình về javascript (datepicker)

Mình có dùng datepicker của jquery-ui.

TH1: Đoạn khởi tạo datepicker nằm cùng file html. Nó hoạt động bình thường.

<input id="time" type="datetime"/>
<script>
$("#time").datepicker();
</script>

TH2: Đoạn khởi tạo datepicker nằm trong 1 file js.

<input id="time" type="datetime"/>
<script src="time.js" type="text/javascript"></script>
window.onload=function(){
    $("#time").datepicker();
};

Nó báo lỗi :“Uncaught TypeError: $(…).datepicker is not a function at window.onload (time.js:56)”
Mình có kiểm tra trước khi gọi hàm datepicker thì time không bằng null và những thao tác khác vẫn hoạt động.

bạn nhúng thư viện datepicker ở đâu?

1 Like

Mình thả nó trong wwwroot (netcore).
À có khi nào gọi từ html và js cần 2 đường dân khác nhau không ? Bởi vì 2 thằng đó hiện đang khác thư mục.
Có vẻ như đang dính vấn đề path không đúng

Bạn cho xem cây thư mục bạn đang thao tác xem?
Và mà theo như lỗi là có thể bạn để file time.js trên file jquery-UI :slight_smile: Đoạn thứ 56 báo không tìm thấy funtion datepicker

1 Like

Bạn show cấu trúc cây thư mục vs đoạn code bạn nhúng thư viện vào html lên đc k?
Thường những lỗi kiểu này là do thư viện được nhúng ở phía sau đoạn code gọi hàm đó

2 Likes


Đây nhé các bạn.

Trong cây thư mục, thư viện jquery-ui.js nằm tại thư mục gốc wwwroot. Các thư viện plans.js (time.js đổi tên), mustache.js… nằm sâu hơn tại wwwroot/js.

Trong Index.cshtml thì jquery và jquery-ui nằm trước plans.js. Và nếu mình gọi như 4 dòng cuối thì nó chạy bình thường (datepicker hiện ra khi click vào input).

Nhưng nếu mình di chuyển 2 dòng khởi tạo datepicker vào trong window.onload của plans.js như bên phải thì nó báo lỗi như #1. Các hàm initTableFilter đã được gọi và chạy.

Mình có xem mã nguồn trang khi lỗi. Thấy có 2 tập tin jquery.js tại 2 đường dẫn khác nhau cùng được import.
Không biết có phải do xung đột nếu chúng là 2 tập tin khác version (đều có khai báo hàm giống nhau) .
Tập tin đầu là của thư viện jquery-ui.
Tập tin sau là có mặc định từ lúc tạo project.

<script type="text/javascript" src="external/jquery/jquery.js"></script>
//….
<script src="/lib/jquery/dist/jquery.js"></script>

Thư viện JQuery/JQuery-ui chưa được nạp đúng.
Không nhầm thì các trình duyệt hiện giờ cũng có một vài hàm giống với hàm JQuery:

$();
$$();

Nên khi kiểm tra thì $("#time") khác null. Nhưng nó không có hàm của JQuery/JQuery-ui nên báo lỗi Uncaught TypeError: $(…).datepicker is not a function (datepicker không phải là hàm).

Mình thấy hình như bạn để mấy thẻ <script> bên ngoài thẻ <html>, <head><body> phải không?

2 Likes

Mình gặp vấn đề là để code chỗ này thì chạy nhưng để sang chỗ khác lại không.
Vấn đề có thể do bạn nói.
Trong Index.html mình không đặt mấy cái đó trong thẻ head, hay body. Bởi vì nó sử dụng _layout.cshtml.
Nên khi gen ra html trả về cho browser nó bao sẵn mấy cái đó nằm trong body của layout rồi.

Ví dụ mình view source đã thấy nội dung được bao lại bang body:

Mình thấy rồi, đúng là do thư viện JQuery thứ 2 gây ra.
Tìm cách loại bỏ thư viện JQuery thứ 2 hoặc viết thế này trong plans.js:

var $ui = $;
window.onload = function(){
// ...
$ui("#timefrom").datepicker();
$ui("#timeto").datepicker();
};

Gán thư viện trước đó vào biến khác để tránh bị gi đè do thư viện thứ 2.

2 Likes

Cảm ơn các bạn.
Mình đã fix được rồi. Đúng ra do bị trùng các file .js.
Cách giải quyết là đẩy hết các file js dung chung như mustache.js, jquery.js, jquery-ui.js… vào trong _Layout.cshtml để nó tự chèn vào dữ lieu gửi về browser. Các file cshtml khác chỉ import những js riêng.
Đồng thời loại bỏ jquery.js mặc định.

2 Likes
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?