Viewing file:  curStructure.php (19.21 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
<!-- Modal Delete -->
<div id="modalDelCs" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header flex-column">
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
<div class="icon-box">
<i class="bi-x-circle" style="color:red; font-size:70px;"></i>
</div><br />
<h4 class="modal-title text-center">Are you sure?</h4>
</div>
<div class="modal-body text-center">
<p>ต้องการลบข้อมูลนี้ใช่หรือไม่</p>
<form method="post" name="delCsForm" id="delCsForm">
<input type="hidden" name="csCurId" id="csCurId" />
<input type="hidden" name="csSeq" id="csSeq" />
<input type="hidden" name="action" value="deleteCs" />
</form>
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button" id="btnConfirmDel" class="btn btn-danger">Delete</button>
</div>
</div>
</div>
</div>
<div class="modal" id="addCurStruc" tabindex="-1" aria-labelledby="addCurStrucModal" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">เพิ่มข้อมูล</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<form method="post" name="addCurStrucForm" id="addCurStrucForm" action="javascript:insert();" class="row g-3 needs-validation" novalidate>
<input type="hidden" name="action" value="insertCs" />
<input type="hidden" class="form-control" name="csCurId" id="csCurId" required />
<div class="col-md-8">
<div class="input-group">
<label for="inputGroupSelect01" class="input-group-text">หมวดวิชาหลัก</label>
<select class="form-select" name="csCdId1" id="csCdId1" required>
<option selected disabled value="">-- เลือก --</option>
<?php
$sql = "SELECT * FROM rg_Condition";
$link->query($sql);
while ($data = $link->getnext()) {
echo "<option value='" . $data->cdId . "'>" . $data->cdName . " " . $data->cdNameE . "</option>";
}
?>
</select>
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label for="inputGroup01" class="input-group-text">ลำดับที่</label>
<input type="text" class="form-control" name="csSeq" id="csSeq" required />
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-8">
<div class="input-group">
<label for="inputGroupSelect02" class="input-group-text">หมวดวิชาย่อย</label>
<select class="form-select" name="csCdId2" id="csCdId2" required>
<option selected disabled value="">-- เลือก --</option>
<?php
$sql = "SELECT * FROM rg_Condition";
$link->query($sql);
while ($data = $link->getnext()) {
echo "<option value='" . $data->cdId . "'>" . $data->cdName . " " . $data->cdNameE . "</option>";
}
?>
</select>
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label for="inputGroup02" class="input-group-text">หน่วยกิต</label>
<input type="number" class="form-control" name="csCreditTotal" id="csCreditTotal" required />
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-12" style="text-align: center;">
<button type="submit" id="btnAddCsSubmit" class="btn btn-primary">Save</button>
<!--<button type="submit" class="btn btn-primary">Save</button>-->
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal" id="editCs" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">แก้ไขข้อมูล</h5>
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container">
<form method="post" name="editCsForm" id="editCsForm" action="javascript:updateCs();" class="row g-3 needs-validation" novalidate>
<input type="hidden" name="action" value="updateCs" />
<input type="hidden" class="form-control" name="csCurId" id="csCurId" />
<div class="col-md-8">
<div class="input-group">
<label for="inputGroupSelect01" class="input-group-text">หมวดวิชาหลัก</label>
<select class="form-select" name="csCdId1-edit" id="csCdId1-edit" required>
<option selected disabled value="">-- เลือก --</option>
<?php
$sql = "SELECT * FROM rg_Condition";
$link->query($sql);
while ($data = $link->getnext()) {
echo "<option value='" . $data->cdId . "'>" . $data->cdName . " " . $data->cdNameE . "</option>";
}
?>
</select>
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label for="inputGroup01" class="input-group-text">ลำดับที่</label>
<input type="text" class="form-control" name="csSeq" id="csSeq" readonly />
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-8">
<div class="input-group">
<label for="inputGroupSelect02" class="input-group-text">หมวดวิชาย่อย</label>
<select class="form-select" name="csCdId2-edit" id="csCdId2-edit" required>
<option selected disabled value="">-- เลือก --</option>
<?php
$sql = "SELECT * FROM rg_Condition";
$link->query($sql);
while ($data = $link->getnext()) {
echo "<option value='" . $data->cdId . "'>" . $data->cdName . " " . $data->cdNameE . "</option>";
}
?>
</select>
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-4">
<div class="input-group">
<label for="inputGroup02" class="input-group-text">หน่วยกิต</label>
<input type="number" class="form-control" name="csCreditTotal" id="csCreditTotal" required />
<div class="invalid-feedback">
กรุณากรอกข้อมูลให้ถูกต้อง
</div>
</div>
</div>
<div class="col-md-12" style="text-align: center;">
<button type="submit" id="btnUpdateCsSubmit" class="btn btn-primary">Update</button>
<!--<button type="submit" class="btn btn-primary">Save</button>-->
</div>
</form>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="container">
<p class="fs-3">จัดการข้อมูลโครงสร้างหลักสูตร(หน่วยกิต)</p>
<fieldset class="border p-2">
<legend class="float-none w-auto p-2">เลือกหลักสูตร</legend>
<div class="col-md-12">
<div class="input-group">
<label for="inputGroupSelect01" class="input-group-text">หลักสูตร</label>
<select class="form-select" name="curSelect" id="curSelect">
<option selected disabled value="">-- เลือก --</option>
<?php
$sql = "SELECT * FROM rg_Curriculum WHERE curStatus = 'Y'";
$link->query($sql);
while ($data = $link->getnext()) {
echo "<option value='" . $data->curId . "'>" . $data->curName . "</option>";
}
?>
</select>
</div>
</div><br />
</fieldset><br />
<table id="curStrucList" class="table table-striped display" style="width:100%">
<thead>
<tr>
<th>
<button class='btn btn-success btn-sm' id="btnOpenModalInsert" data-toggle='modal' data-target='#addCurStruc'>เพิ่มข้อมูล</button>
</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<th class="text-center">ลำดับที่</th>
<th class="text-center">หมวดวิชาหลัก</th>
<th class="text-center">หมวดวิชาย่อย</th>
<th class="text-center">หน่วยกิต</th>
<th class="text-center">จัดการ</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="text-center">ลำดับที่</th>
<th class="text-center">หมวดวิชาหลัก</th>
<th class="text-center">หมวดวิชาย่อย</th>
<th class="text-center">หน่วยกิต</th>
<th class="text-center">จัดการ</th>
</tr>
</tfoot>
</table>
</div>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function() {
$('#csCdId1').select2({
dropdownParent: $('#addCurStruc'),
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
});
$('#csCdId2').select2({
dropdownParent: $('#addCurStruc'),
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
});
$('#csCdId1-edit').select2({
dropdownParent: $('#editCs'),
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
});
$('#csCdId2-edit').select2({
dropdownParent: $('#editCs'),
theme: "bootstrap-5",
width: $(this).data('width') ? $(this).data('width') : $(this).hasClass('w-100') ? '100%' : 'style',
placeholder: $(this).data('placeholder'),
});
if (!$("#curSelect").val()) {
$('#curStrucList').hide();
}
$("#curSelect").change(function() {
$('#curStrucList').show();
$('#curStrucList').DataTable().destroy();
getCurStructureByCur();
})
$("#btnOpenModalInsert").click(function() {
//$("#addCurStrucForm").reset();
//$("#addCurStrucForm [name=\"csCurId\"]").val($("#curSelect").val());
//alert("Hi");
//$("#csCdId1").prop('selectedIndex', 0);
//select_box = document.getElementById("csCdId1");
//select_box.selectedIndex = -1;
})
$("#addCurStruc").on("show.bs.modal", function() {
$("#addCurStrucForm [name=\"csCurId\"]").val($("#curSelect").val());
});
$(document).delegate("[data-target='#modalDelCs']", "click", function() {
$("#delCsForm [name=\"csCurId\"]").val($(this).attr('data-id'));
$("#delCsForm [name=\"csSeq\"]").val($(this).attr('data-id2'));
})
getEditCs();
delCs();
});
function resetForm(selector) {
$(selector)[0].reset();
}
function getCurStructureByCur() {
var curId = $("#curSelect").val();
$('#curStrucList').DataTable({
processing: true,
ajax: {
type: "GET",
url: "api/curriculumStructure.php",
data: {
curId: curId,
action: "getCsByCurId"
},
dataSrc: 'data'
},
columnDefs: [{
targets: [3, 4],
className: 'text-center'
}],
columns: [{
data: "csSeq"
},
{
data: "cdName1"
},
{
data: "cdName2"
},
{
data: "csCreditTotal"
},
{
data: "opt"
},
],
});
}
function getEditCs() {
$(document).delegate("[data-target='#editCs']", "click", function() {
var csCurId = $(this).attr('data-id');
var csSeq = $(this).attr('data-id2');
// Ajax config
$.ajax({
type: "GET", //we are using GET method to get data from server side
url: './api/curriculumStructure.php', // get the route value
data: {
csCurId: csCurId,
csSeq: csSeq,
action: "getCsByCurIdSeq"
}, //set data
beforeSend: function() { //We add this before send to disable the button once we submit it so that we prevent the multiple click
},
success: function(response) { //once the request successfully process to the server side it will return result here
response = JSON.parse(response);
$("#editCsForm [name=\"csCurId\"]").val(response.csCurId);
//$("#editCsForm [name=\"csCdId1-edit\"]").val(response.csCdId1);
$("#csCdId1-edit").val(response.csCdId1).trigger('change');
//$("#editCsForm [name=\"csCdId2-edit\"]").val(response.csCdId2);
$("#csCdId2-edit").val(response.csCdId2).trigger('change');
$("#editCsForm [name=\"csSeq\"]").val(response.csSeq);
$("#editCsForm [name=\"csCreditTotal\"]").val(response.csCreditTotal);
}
});
});
}
function delCs() {
$("#btnConfirmDel").on("click", function() {
var $this = $(this); //submit button selector using ID
var $caption = $this.html(); // We store the html content of the submit button
var form = "#delCsForm"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
//var route = $(form).attr('action'); //get the route using attribute action
var route = "./api/curriculumStructure.php";
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function() { //We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function(response) { //once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// Reload lists of employees
$('#curStrucList').DataTable().destroy();
getCurStructureByCur();
// We will display the result using alert
alert(response);
// Reset form
//resetForm(form);
// Close modal
$(".modal-backdrop").remove();
$('#modalDelCs').modal().toggle();
},
});
});
}
function insert() {
var $this = $("#btnAddCsSubmit"); //submit button selector using ID
var $caption = $this.html(); // We store the html content of the submit button
var form = "#addCurStrucForm"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
//var route = $(form).attr('action'); //get the route using attribute action
var route = "./api/curriculumStructure.php";
//alert("call insert function");
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function() { //We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function(response) { //once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// Reload lists of employees
//getDataAll();
//window.location.href='./?page=editCurriculum';
//$('#curStrucList').DataTable().ajax.reload();
$('#curStrucList').DataTable().destroy();
getCurStructureByCur();
// We will display the result using alert
alert(response);
// Reset form
//resetForm(form);
// Close modal
//$('#addCurStruc').modal().hide();
$(".modal-backdrop").remove();
$('#addCurStruc').modal().toggle();
//$(".modal-backdrop").remove();
},
});
}
function updateCs() {
var $this = $("#btnUpdateCsSubmit"); //submit button selector using ID
var $caption = $this.html(); // We store the html content of the submit button
var form = "#editCsForm"; //defined the #form ID
var formData = $(form).serializeArray(); //serialize the form into array
//var route = $(form).attr('action'); //get the route using attribute action
var route = "./api/curriculumStructure.php";
// Ajax config
$.ajax({
type: "POST", //we are using POST method to submit the data to the server side
url: route, // get the route value
data: formData, // our serialized array data for server side
beforeSend: function() { //We add this before send to disable the button once we submit it so that we prevent the multiple click
$this.attr('disabled', true).html("Processing...");
},
success: function(response) { //once the request successfully process to the server side it will return result here
$this.attr('disabled', false).html($caption);
// Reload lists of employees
//getDataAll();
//window.location.href='./?page=editCurriculum';
$('#curStrucList').DataTable().destroy();
getCurStructureByCur();
// We will display the result using alert
alert(response);
// Reset form
//resetForm(form);
// Close modal
$(".modal-backdrop").remove();
$('#editCs').modal().toggle();
},
});
}
(() => {
'use strict'
// Fetch all the forms we want to apply custom Bootstrap validation styles to
const forms = document.querySelectorAll('.needs-validation')
// Loop over them and prevent submission
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>
|