Trại hè công nghệ

Khi sử dụng DataTables ( https://datatables.net/ ) , một số lỗi phổ biến mà người dùng hay gặp gồm: 1️⃣ Lỗi “DataTables warning: table id=…” Nguyên nhân: HTML table chưa đúng cấu trúc ( <thead> và <tbody> không đồng nhất). Số cột trong <thead> không khớp với số cột trong <tbody> . Table chưa được load khi gọi $('#table').DataTable() (thường gặp khi table được tạo động bằng JS/Ajax). Cách khắc phục: Đảm bảo <thead> và <tbody> có cùng số cột. Khởi tạo DataTable sau khi HTML table đã có trong DOM . Nếu dùng Ajax, sử dụng $('#table').DataTable({ ajax: ... }) . 2️⃣ Lỗi không hiển thị dữ liệu Ajax Nguyên nhân: Response JSON không đúng format. Trường data trong JSON không đúng. Ví dụ DataTables mặc định đòi {"data": [...]} . Cách khắc phục: $('#table').DataTable({ ajax: { url: '/api/data', dataSrc: '' // nếu JSON trả về mảng trực tiế...

Dưới đây là các lỗi hay gặp khi sử dụng AdminLTE mà Tiến sĩ M có thể gặp phải, kèm giải thích và cách khắc phục: 1️⃣ CSS / JS không load đúng Triệu chứng: Giao diện “vỡ”, biểu tượng không hiện, sidebar không hoạt động. Nguyên nhân: Sai đường dẫn file CSS hoặc JS, hoặc tải theo thứ tự sai. Cách khắc phục: Luôn tải jQuery → Bootstrap → AdminLTE JS . Kiểm tra đường dẫn file: nếu dùng CDN, đảm bảo mạng ổn định; nếu dùng local, kiểm tra đúng folder plugins và dist . 2️⃣ Xung đột jQuery / Bootstrap Triệu chứng: Tooltip, modal, dropdown không hoạt động. Nguyên nhân: Dùng nhiều phiên bản jQuery hoặc Bootstrap cùng lúc. Cách khắc phục: Chỉ giữ 1 phiên bản jQuery. Kiểm tra console xem có lỗi “$.fn.tooltip is not a function” → thường là xung đột jQuery. 3️⃣ Sidebar / Treeview không hoạt động Triệu chứng: Menu không bung ra khi click. Nguyên nhân: Chưa khởi tạo AdminLTE layout hoặc thiếu JS. Cách khắc phục: $(function () { $('.sidebar-menu').Treev...

Khi dùng Bootstrap , đặc biệt là các phiên bản phổ biến như 4 hoặc 5, có một số lỗi thường gặp mà nhiều dev hay vấp phải.  Dưới đây là tổng hợp chi tiết kèm nguyên nhân và cách khắc phục: 1️⃣ CSS hoặc JS không hoạt động Triệu chứng: Các class của Bootstrap không áp dụng được, các component như modal, dropdown không chạy. Nguyên nhân: Chưa nhúng đúng file CSS hoặc JS. Thứ tự nhúng sai: JS của Bootstrap cần jQuery (với BS4) và Popper.js trước. Phiên bản không tương thích giữa CSS và JS. Cách khắc phục: Kiểm tra link CDN hoặc file local. Với Bootstrap 4: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstra...

Dùng KnockoutJS khá nhẹ nhàng, nhưng vẫn có những lỗi phổ biến mà người mới (hoặc ngay cả lập trình viên giàu kinh nghiệm) hay gặp.  Mình liệt kê chi tiết theo nhóm, kèm cách xử lý: 1️⃣ Lỗi liên quan đến observable và observableArray Lỗi Nguyên nhân Cách khắc phục Dữ liệu không tự động cập nhật giao diện Không khai báo biến là ko.observable() hoặc ko.observableArray() Luôn bọc giá trị cần binding bằng ko.observable() hoặc ko.observableArray() Không push được vào mảng hiển thị Dùng mảng JS thường thay vì observableArray() Dùng myArray.push(item) trên observableArray , không dùng mảng thường Gán trực tiếp giá trị mới cho observableArray Viết myArray = [...] thay vì myArray(newArray) Dùng myArray(newArray) để thay đổi toàn bộ mảng 2️⃣ Lỗi binding ( data-bind ) Lỗi Nguyên nhân Cách khắc phục Binding không hoạt động Gọi ko.applyBindings(viewModel) trước khi DOM sẵn sàng Đặt ko.applyBindings sau khi DOM đã load, hoặc dùng document.addEv...

⏱️ Nếu chỉ có 1 tiếng để học KnockoutJS Mục tiêu chiến đấu: 🧠 Hiểu KnockoutJS là gì 🔗 Biết dùng data-bind 🌱 Hiểu observable() và observableArray() 📝 Làm 1 app nhỏ CRUD trong 20 dòng code 🏹 KnockoutJS là gì? Nó là thư viện ràng buộc dữ liệu ↔ giao diện theo mô hình MVVM . 👉 Tóm gọn: Bạn đổi giá trị trong JS → UI đổi theo. Không cần document.getElementById(...).innerText = ... thủ công nữa. 📦 Cài KnockoutJS (gọi 1 cái là xài) <script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script> 🔮 observable() = biến biết “tự báo” function ViewModel() { this.name = ko.observable("Tiến sĩ M"); } ko.applyBindings(new ViewModel()); HTML: <input data-bind="value: name"> <p>Xin chào: <span data-bind="text: name"></span></p> ➡️ Gõ vào input → nội dung dưới thay đổi real-time . 🧺 observableArray() = danh sách sống function ViewModel() { this.items...