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

Duong_Act · November 11, 2018, 6:45am

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.

htwap · November 10, 2018, 11:34am

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

Duong_Act · November 10, 2018, 11:57am

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

Twot_Leo_L2t · November 10, 2018, 4:26pm

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 Đoạn thứ 56 báo không tìm thấy funtion datepicker

htwap · November 11, 2018, 4:35am

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

Duong_Act · November 11, 2018, 6:00am

Đâ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.

Duong_Act · November 11, 2018, 6:13am

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>

SITUVN.gcd · November 11, 2018, 6:45am

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> và <body> phải không?

Duong_Act · November 11, 2018, 6:58am

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:

SITUVN.gcd · November 11, 2018, 8:21am

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.

Duong_Act · November 11, 2018, 8:21am

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.