Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit

Nền tảng Kiến thức - Hành trang tới Tương lai

Chương 15-Bài 7. Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit

Tác giả: Dương Nguyễn Phú Cường #9775

Ngày đăng: Hồi xưa đó

Lượt xem: 101

Xem định dạng IN

Tạo chức năng Edit

<!-- Nhúng file cấu hình để xác định được Tên và Tiêu đề của trang hiện tại người dùng đang truy cập -->
<?php include_once(__DIR__ . '/../../layouts/config.php'); ?>

<!DOCTYPE html>
<html>

<head>
  <!-- Nhúng file quản lý phần HEAD -->
  <?php include_once(__DIR__ . '/../../layouts/head.php'); ?>
</head>

<body class="d-flex flex-column h-100">
  <!-- header -->
  <?php include_once(__DIR__ . '/../../layouts/partials/header.php'); ?>
  <!-- end header -->

  <div class="container-fluid">
    <div class="row">
      <!-- sidebar -->
      <?php include_once(__DIR__ . '/../../layouts/partials/sidebar.php'); ?>
      <!-- end sidebar -->

      <main role="main" class="col-md-10 ml-sm-auto px-4 mb-2">
        <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
          <h1 class="h2">Hiệu chỉnh chức vụ</h1>
        </div>

        <!-- Block content -->
        <div id="noticeContainer" style="display: none;">
          <div class="alert alert-primary" role="alert">
            <div id="noticeMessage"></div>
          </div>
        </div>

        <form name="frmEdit" id="frmEdit" method="post" action="">
          <div class="form-group">
            <label for="CV_MA">Mã chức vụ</label>
            <input type="text" class="form-control" id="CV_MA" name="CV_MA" placeholder="Mã chức vụ" minlength="5" maxlength="5" readonly>
            <small id="idHelp" class="form-text text-muted">Mã chức vụ không được phép hiệu chỉnh.</small>
          </div>
          <div class="form-group">
            <label for="CV_TEN">Tên chức vụ</label>
            <input type="text" class="form-control" id="CV_TEN" name="CV_TEN" placeholder="Tên chức vụ" value="" minlength="3" maxlength="150">
          </div>
          <div class="form-group">
            <label for="CV_TILE">Tỉ lệ chức vụ</label>
            <input type="number" class="form-control" id="CV_TILE" name="CV_TILE" placeholder="Tỉ lệ chức vụ" value="" min="0" max="100">
          </div>
          <div class="form-group">
            <label for="CV_NAMAPDUNG">Năm áp dụng chức vụ</label>
            <input type="number" class="form-control" id="CV_NAMAPDUNG" name="CV_NAMAPDUNG" placeholder="Năm áp dụng chức vụ" value="" min="0001" max="9999">
          </div>
          <div class="form-group">
            <label for="CV_GHICHU">Ghi chú chức vụ</label>
            <textarea class="form-control" id="CV_GHICHU" name="CV_GHICHU" placeholder="Mô tả chức vụ" minlength="3" maxlength="150"></textarea>
          </div>
          <button class="btn btn-primary" name="btnSave">Lưu dữ liệu</button>
          <a href="index.php" class="btn btn-outline-primary">Quay về Danh sách</a>
        </form>
        <!-- End block content -->
      </main>
    </div>
  </div>

  <!-- footer -->
  <?php include_once(__DIR__ . '/../../layouts/partials/footer.php'); ?>
  <!-- end footer -->

  <!-- Nhúng file quản lý phần SCRIPT JAVASCRIPT -->
  <?php include_once(__DIR__ . '/../../layouts/scripts.php'); ?>

  <!-- Các file Javascript sử dụng riêng cho trang này, liên kết tại đây -->
  <!-- <script src="..."></script> -->
  <script>
    $(document).ready(function() {
      function getDuLieuChucVuCanHieuChinh() {
        let CV_MA = getUrlParameter('CV_MA');

        $.ajax(`/api/chucvu/get.php?CV_MA=${CV_MA}`, {
          success: function(data) {
            var dataObj = JSON.parse(data);
            console.log(dataObj);
            var item = dataObj.data[0];
            $('#CV_MA').val(item.CV_MA);
            $('#CV_TEN').val(item.CV_TEN);
            $('#CV_TILE').val(item.CV_TILE);
            $('#CV_NAMAPDUNG').val(item.CV_NAMAPDUNG);
            $('#CV_GHICHU').val(item.CV_GHICHU);

            $('#noticeMessage').html(`<span>${dataObj.msg}. Thông tin ${item.CV_MA} đã được điền vào form nhập liệu.</span>`);
            $('#noticeMessage').parent().removeClass().addClass('alert alert-primary');
            $('#noticeContainer').css('display', 'block');
          },
          error: function() {
            var htmlString = `<span>Không thể xử lý</span>`;
            $('#noticeMessage').html(htmlString);
            $('#noticeMessage').parent().removeClass().addClass('alert alert-danger');
            $('#noticeContainer').css('display', 'block');
          }
        });
      }

      $("#frmEdit").validate({
        rules: {
          CV_MA: {
            required: true,
            minlength: 5,
            maxlength: 5
          },
          CV_TEN: {
            required: true,
            minlength: 3,
            maxlength: 150
          },
          CV_TILE: {
            required: true,
            number: true
          },
          CV_NAMAPDUNG: {
            required: true,
            minlength: 4,
            maxlength: 4
          },
          CV_GHICHU: {
            required: false,
            minlength: 3,
            maxlength: 150
          }
        },
        messages: {
          CV_MA: {
            required: "Vui lòng nhập mã chức vụ",
            minlength: "Tên chức vụ phải có ít nhất 5 ký tự",
            maxlength: "Tên chức vụ không được vượt quá 5 ký tự"
          },
          CV_TEN: {
            required: "Vui lòng nhập tên chức vụ",
            minlength: "Tên chức vụ phải có ít nhất 3 ký tự",
            maxlength: "Tên chức vụ không được vượt quá 150 ký tự"
          },
          CV_TILE: {
            required: "Vui lòng nhập tỉ lệ chức vụ",
            number: "Tỉ lệ chức vụ phải là số"
          },
          CV_NAMAPDUNG: {
            required: "Vui lòng nhập năm áp dụng chức vụ",
            minlength: "Năm áp dụng chức vụ phải có ít nhất 4 ký tự",
            maxlength: "Năm áp dụng chức vụ không được vượt quá 4 ký tự",
            number: "Năm áp dụng chức vụ phải là số"
          },
          CV_GHICHU: {
            required: "Vui lòng nhập ghi chú cho chức vụ",
            minlength: "Ghi chú cho chức vụ phải có ít nhất 3 ký tự",
            maxlength: "Ghi chú cho chức vụ không được vượt quá 150 ký tự"
          },
        },
        errorElement: "em",
        errorPlacement: function(error, element) {
          // Thêm class `invalid-feedback` cho field đang có lỗi
          error.addClass("invalid-feedback");
          if (element.prop("type") === "checkbox") {
            error.insertAfter(element.parent("label"));
          } else {
            error.insertAfter(element);
          }
        },
        success: function(label, element) {},
        highlight: function(element, errorClass, validClass) {
          $(element).addClass("is-invalid").removeClass("is-valid");
        },
        unhighlight: function(element, errorClass, validClass) {
          $(element).addClass("is-valid").removeClass("is-invalid");
        },

        submitHandler: function(form) {
          var sendData = {
            CV_MA: $('#CV_MA').val(),
            CV_TEN: $('#CV_TEN').val(),
            CV_TILE: $('#CV_TILE').val(),
            CV_NAMAPDUNG: $('#CV_NAMAPDUNG').val(),
            CV_GHICHU: $('#CV_GHICHU').val(),
          };
          $.ajax({
            url: '/api/chucvu/update.php',
            type: 'post',
            data: sendData,
            success: function(data) {
              var dataObj = JSON.parse(data);
              console.log(dataObj);
              
              var htmlString = `<span>${dataObj.msg}</span>`;
              $('#noticeMessage').html(htmlString + ". Sẽ chuyển hướng về trang Danh sách trong 3s...");
              $('#noticeContainer').css('display', 'block');

              if(dataObj.statusCode === 200) {
                // Điều hướng về trang danh sách trong vòng 3s
                setTimeout(() => {
                  location.href = "index.php";
                }, 3000);
                $('#noticeMessage').parent().removeClass().addClass('alert alert-success');
              } else {
                $('#noticeMessage').parent().removeClass().addClass('alert alert-danger');
              }
            },
            error: function() {
              var htmlString = `<span>Không thể xử lý</span>`;
              $('#noticeMessage').html(htmlString);
              $('#noticeMessage').parent().removeClass().addClass('alert alert-danger');
              $('#noticeContainer').css('display', 'block');
            }
          });
        }
      });

      // Init
      getDuLieuChucVuCanHieuChinh();
    });
  </script>
</body>

</html>

Về trang chủ Về Khóa học

Bài học trước Bài học tiếp theo

Chương trình học

Các bài học

Chương trình học

Bao gồm Module, Chương, Bài học, Bài tập, Kiểm tra...

Chương trình học

Bài học trước Bài học tiếp theo

Về trang chủ Về Khóa học

Vuexy

Files

Members

NỀN TẢNG

Chương 15-Bài 7. Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit

Mục lục

Chương trình học

Chương trình học

Chương trình học

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜

Vuexy

Files

Members

Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit

Chương 15-Bài 7. Tạo chức năng CRUD (Xem-Read, Thêm-Create, Sửa-Edit, Xóa-Delete) bằng kỹ thuật AJAX cho danh mục Phẳng - Edit

Mục lục

Chương trình học

Chương trình học

Chương trình học

Menu Tiện ích

Menu Hướng dẫn Học tập

❤🧡💛💚💙💜 Học là phải THỰC HÀNH ❤🧡💛💚💙💜