feat(ReduksiSampahSatpel): add event change form lokasi dan jenis lokasi
parent
bb7474ecf8
commit
3d0950f484
|
|
@ -156,8 +156,35 @@
|
||||||
@section Scripts {
|
@section Scripts {
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var table;
|
var table;
|
||||||
|
var allLokasi = [];
|
||||||
|
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
|
|
||||||
|
// Load data lokasi
|
||||||
|
$.ajax({
|
||||||
|
url: '/Master/Lokasi/Table',
|
||||||
|
method: 'GET',
|
||||||
|
success: function (response) {
|
||||||
|
|
||||||
|
// ambil semua data kecuali 'aksi'
|
||||||
|
allLokasi = (response.data || []).map(item => {
|
||||||
|
return {
|
||||||
|
jenis_lokasi: item.jenis_lokasi,
|
||||||
|
nama_lokasi: item.nama_lokasi,
|
||||||
|
kecamatan: item.kecamatan,
|
||||||
|
kelurahan: item.kelurahan,
|
||||||
|
detail_alamat: item.detail_alamat,
|
||||||
|
rt: item.rt,
|
||||||
|
rw: item.rw
|
||||||
|
};
|
||||||
|
});
|
||||||
|
},
|
||||||
|
error: function () {
|
||||||
|
console.error("Gagal mengambil data lokasi dari /Master/Lokasi/Table");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
table = new DataTable('#example', {
|
table = new DataTable('#example', {
|
||||||
ajax: '/Main/ReduksiSampahSatpel/Table',
|
ajax: '/Main/ReduksiSampahSatpel/Table',
|
||||||
scrollX: true,
|
scrollX: true,
|
||||||
|
|
@ -175,19 +202,56 @@
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
$('#jenis_lokasi').on('change', function() {
|
$('#jenis_lokasi').on('change', function() {
|
||||||
const jenisLokasi = $(this).val();
|
const jenisLokasi = $(this).val();
|
||||||
|
|
||||||
if (jenisLokasi) {
|
if (jenisLokasi) {
|
||||||
$('#formDetail').removeClass('hidden').hide().fadeIn(300);
|
$('#formDetail').removeClass('hidden').hide().fadeIn(300);
|
||||||
populateLokasiDropdown(jenisLokasi);
|
populateNamaLokasiDropdown(jenisLokasi);
|
||||||
resetForm();
|
$('#formTambah')[0].reset();
|
||||||
} else {
|
} else {
|
||||||
$('#formDetail').fadeOut(300);
|
$('#formDetail').fadeOut(300);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 🔹 Event: ketika nama_lokasi dipilih
|
||||||
|
$('#lokasi').on('change', function () {
|
||||||
|
const nama = $(this).val();
|
||||||
|
|
||||||
|
if (!nama) {
|
||||||
|
$('#alamat').val(''); // reset jika tidak ada pilihan
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// cari lokasi yang sesuai
|
||||||
|
const lokasi = allLokasi.find(item => item.nama_lokasi === nama);
|
||||||
|
|
||||||
|
if (lokasi) {
|
||||||
|
// format: Kecamatan, Kelurahan, RT, RW, Detail Alamat
|
||||||
|
const formattedAlamat = `${lokasi.kecamatan}, ${lokasi.kelurahan}, RT ${lokasi.rt}, RW ${lokasi.rw}, ${lokasi.detail_alamat}`;
|
||||||
|
$('#alamat').val(formattedAlamat);
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 🔹 Fungsi: filter lokasi berdasarkan jenis_lokasi
|
||||||
|
function populateNamaLokasiDropdown(jenisLokasi) {
|
||||||
|
let options = '<option value="">Pilih salah satu</option>';
|
||||||
|
|
||||||
|
if (jenisLokasi) {
|
||||||
|
// filter lokasi berdasarkan jenis_lokasi
|
||||||
|
const filtered = allLokasi.filter(item => item.jenis_lokasi === jenisLokasi);
|
||||||
|
|
||||||
|
filtered.forEach(item => {
|
||||||
|
options += `<option value="${item.nama_lokasi}">${item.nama_lokasi}</option>`;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$('#lokasi').html(options);
|
||||||
|
}
|
||||||
|
|
||||||
function closeModal() {
|
function closeModal() {
|
||||||
// Reset form
|
// Reset form
|
||||||
$('#formTambah')[0].reset();
|
$('#formTambah')[0].reset();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue