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
Ngày đăng:
13/3/2025, 8:3
Lượt xem: 201
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>
Ủng hộ tác giả
Bình luận
Bình luận của bạnNền tảng các kiến thức học tập
Cùng nhau học tập, khám phá các kiến thức nền tảng về Lập trình web, mobile, database nhé.
Nền tảng kiến thức - Hành trang tới tương lai hân hạnh phục vụ Quý khách!
Khám phá, trải nghiệm ngay
Vui lòng đăng nhập để gởi bình luận!
Đăng nhậpChưa có bình luận nào!