💡Lỗi hay gặp khi dùng AdminLTE

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').Treeview(); // hoặc dùng AdminLTE.init()
});

4️⃣ Toastr / SweetAlert không hiện thông báo

Triệu chứng: Gọi toastr hoặc swal nhưng không thấy popup.
Nguyên nhân: Chưa load CSS/JS của plugin, hoặc xung đột với AdminLTE.
Cách khắc phục: Load plugin sau AdminLTE JS, kiểm tra console.

5️⃣ Datatable hiển thị lỗi

Triệu chứng: Bảng không style, nút pagination không hiện.
Nguyên nhân: Thiếu CSS/JS của DataTables, hoặc xung đột theme AdminLTE.
Cách khắc phục:

  • Load datatables.min.css và datatables.min.js.

  • Nếu dùng Bootstrap theme: load dataTables.bootstrap5.min.css/js.

6️⃣ Layout không responsive

Triệu chứng: Mobile view hiển thị sai, sidebar che mất nội dung.
Nguyên nhân: Thiếu meta viewport hoặc dùng container sai.
Cách khắc phục:

<meta name="viewport" content="width=device-width, initial-scale=1">

  • Sử dụng đúng class container, container-fluid, row, col-*.

7️⃣ Icon không hiển thị

Triệu chứng: <i class="fas fa-user"></i> chỉ hiện ô vuông.
Nguyên nhân: Font Awesome chưa load, hoặc load phiên bản sai.
Cách khắc phục: Load đúng CDN hoặc file CSS Font Awesome tương thích AdminLTE version.

8️⃣ Lỗi khi cập nhật AdminLTE

Triệu chứng: Một số plugin hoặc script trước đó không hoạt động.
Nguyên nhân: AdminLTE version mới thay đổi API, class, hoặc file JS.
Cách khắc phục: Đọc changelog, điều chỉnh code tương thích.

💡 Tip chung:

  • Luôn kiểm tra console (F12) để biết lỗi JS / CSS.

  • Tạo project mẫu với AdminLTE vanilla trước, sau đó mới tùy chỉnh.

Nếu Tiến sĩ M muốn, tôi có thể làm luôn bảng tổng hợp lỗi AdminLTE + cách fix nhanh theo emoji style giống style bảng mà Tiến sĩ M hay dùng, nhìn cực trực quan.

✨ made by AI – Debugging Wizard Edition 🛠️

Google Account Video Purchases 478/2 Hai Bà Trưng, Phường Tân Định, Quận 1, Thành phố Hồ Chí Minh, Việt Nam

Nhận xét

Đăng nhận xét

Bài đăng phổ biến từ blog này

🌈 Tự Động Highlight Code Trong Blogger

Phần style pre code { white-space: pre-wrap; word-break: break-word; } .code-wrapper { position: relative; } .copy-button { position: absolute; top: 8px; right: 8px; background: #444; color: #fff; border: none; font-size: 0.75rem; padding: 4px 8px; border-radius: 6px; cursor: pointer; opacity: 0.7; z-index: 9; } .copy-button:hover { opacity: 1; } Chèn trước thẻ đóng head Code nhiều dòng hay 01 dòng xài giống nhau: const msg = "Xin chào Tiến sĩ M!"; console.log(msg); Code 01 dòng: document.querySelector() Thẻ nào quá phức tạp thì xài như sau: < pre class = "language-js" data-keep-markup >   < code >     Nội dung...   </ code > </ pre > Chèn trước thẻ đóng body < b : if cond = ...
Đọc thêm

🧭CRUD CHUẨN LARAVEL

Errors log: Cài  Laravel  trên host nhưng k phù hợp  php  version Dùng lệnh  artisan  trong  Terminal  nhưng chưa đứng trong thư mục chứa source  Laravel Lỗi  ABCController not found  khi chạy artisan -> do thiếu khai báo namespace ở đầu file web.php Dưới đây là 👉 LỘ TRÌNH 3 NGÀY – CRUD CHUẨN LARAVEL Thiết kế cho người đã có nền tảng lập trình , học để làm thật , không lan man. 🧭 MỤC TIÊU SAU 3 NGÀY ✔ Hiểu chuẩn luồng Laravel ✔ Tự tay xây CRUD hoàn chỉnh ✔ Code đọc được – mở rộng được – không bừa ✔ Sẵn sàng làm app nội bộ / dashboard / CMS 📅 NGÀY 1 – NỀN TẢNG & CRUD CƠ BẢN (80%) ⏱️ ~2–3 giờ 🎯 Mục tiêu ngày 1 Hiểu luồng MVC Làm CRUD chạy được Không cần đẹp – chỉ cần đúng 🧩 1️⃣ Tạo project CRUD mẫu Ví dụ: Post (id, title, content, status) php artisan make:model Post -mcr ➡️ Tạo: Model: app/Models/Post.php Migration Controller resource 🧱 2️⃣ Migration – Tạo bảng Gõ đoạn code sau để tạo bảng trong file databa...
Đọc thêm

🚀01 giờ học cách sử dụng Developer Console

Nếu chỉ có 1 giờ để học cách sử dụng Developer Console (trong Chrome, Edge, Brave...), thì đây là lộ trình cấp tốc và thực chiến, đủ để: ✅ Kiểm tra lỗi ✅ Thử nghiệm code JavaScript ✅ Lấy dữ liệu từ DOM ✅ Giả lập thay đổi giao diện 🚀 LỘ TRÌNH 1 GIỜ SỬ DỤNG CONSOLE 🧱 BƯỚC 1: MỞ CONSOLE (1 phút) Cách mở nhanh : Chuột phải → Inspect → Chọn tab Console Hoặc dùng phím tắt: Windows/Linux : Ctrl + Shift + I rồi Ctrl + ~ macOS : Cmd + Option + I 🔍 BƯỚC 2: ĐỌC & GHI LOG (5 phút) Hành động Câu lệnh Ghi log ra console console.log("Hello, Tiến sĩ M!"); Cảnh báo console.warn("Cẩn thận!") Báo lỗi console.error("Đây là lỗi") In ra object/table console.table(document.links) 👉 Mẹo : Dùng console.clear() để xóa màn hình console. 🌐 BƯỚC 3: TRUY CẬP DOM & LẤY DỮ LIỆU (10 phút) Mục tiêu Câu lệnh Lấy 1 phần tử document.querySelector('h1') Lấy nhiều phần tử document.querySelector...
Đọc thêm