Untitled
unknown
plain_text
a year ago
8.7 kB
6
Indexable
view <meta name="csrf-token" content="{{ csrf_token() }}"> <div class="modal fade" id="modal-komplead" aria-labelledby="exampleModalLabel" aria-hidden="true" data-route="{{ route('edit-jobprofileeditikomleader') }}" data-route2="{{ route('jobprofile-fetch-detailkompetensi') }}" data-route3="{{ route('jobprofile-fetch-komplead') }}" data-route4="{{ route('jobprofile-hapus-komplead') }}"> <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="staticBackdropLabel">Edit Kompetensi Kepemimpinan</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> </div> <div class="modal-body"> <form id="form-komplead" method="POST"> @csrf <div class="row"> <div class="col-sm-6"> <ul id="listContainer" class="list-group"></ul> <div style="margin-bottom: 16px;"> <p class="body-title">Pilih Kompetensi</p> <input type="hidden" name="ididentitasjbtn" value="{{ $ididentitasjbtn }}"> <!-- Dropdown for Kompetensi --> <select class="form-select select2 kompetensi-select" style="width: 100%;" data-placeholder="Pilih Kompetensi"> <option selected disabled></option> @foreach($selectkomplead['result'] as $item) <option value="{{ $item['idkompetensilead'] }}" data-idkompetensilead="{{ $item['idkompetensilead'] }}" data-namakomplead="{{ $item['namakomplead'] }}">{{ $item['namakomplead'] }}</option> @endforeach </select> </div> <!-- <div id="selectedKompetensiLead"> --> <!-- Selected kompetensi will be appended here --> <!-- </div> --> <span class="divider"></span> </div> <div class="col-sm-6"> <p class="body-title" style="text-align:center">Kamus Kompetensi</p> <hr> <div class="nama-kompetensi"> <p style="font-weight: 600; text-align:left">Nama Kompetensi:</p> <p style="text-align:left" id="nama-kompetensi"></p> </div> <div class="desc-kompetensi"> <p style="font-weight: 600; text-align:left">Definisi:</p> <p style="text-align:left" id="desc-kompetensi"></p> </div> </div> </div> </form> </div> <div class="modal-footer justify-content-between"> <div> <button type="button" class="btn btn-batal" data-bs-dismiss="modal">Batal</button> </div> <div> <button type="submit" form="form-komplead" class="btn btn-primary">Simpan</button> </div> </div> </div> </div> </div> <script> $(document).ready(function () { $('#modal-komplead').on('shown.bs.modal', function () { // Reset select element and clear descriptions when the modal opens $('.kompetensi-select').val(null).trigger('change'); $('#desc-kompetensi').text(''); $('#nama-kompetensi').text(''); // Event listener for changes on the select element $('.kompetensi-select').on('change', function () { var selectedId = $(this).val(); var selectedText = $(this).find('option:selected').text(); if (selectedId) { updateDescription(selectedId, selectedText); } }); }); }); function updateDescription(selectedValue, selectedText) { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var data = { ididentitasjbtn: idIdentitas, id: selectedValue }; $.ajax({ url: "{{ route('jobprofile-fetch-desc-komplead') }}", type: "GET", data: data, beforeSend: function() { // Show loading indicator $('#desc-kompetensi').text('Loading...'); }, success: function (response) { console.log('AJAX Response:', response); // Log the response console.log(selectedText); var nameElement = $('#nama-kompetensi'); var descriptionElement = $('#desc-kompetensi'); if (response.result) { nameElement.text(selectedText || ''); let descKompLead = response.result.result.map((data) => { if (data.namakomplead == selectedText) return data.desckomplead; }); descriptionElement.text(descKompLead[0] || ''); } else { console.error("No matching item found for id:", selectedValue); descriptionElement.text('No matching description found.'); } }, error: function (xhr, status, error) { console.error('Error fetching description:', error); $('#desc-kompetensi').text('Error fetching description.'); } }); } </script> JS dropdown $(document).ready(function() { $('#modal-komplead').on('shown.bs.modal', function () { // Initialize Select2 $('.select2').select2({ dropdownParent: $('#modal-komplead'), placeholder: "Pilih", allowClear: true, }); var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var routeUrl = $('#modal-komplead').data('route3'); // AJAX Request $.ajax({ url: routeUrl, // Ganti dengan URL endpoint API Anda type: 'GET', data: { ididentitasjbtn: idIdentitas }, success: function(response) { var levels = response.result.result; var ididentitasjbtn = ididentitasjbtn; var listItems = levels.map(function(level) { console.log(level); if (level.namakomplead && level.namalvlkomplead) { return '<li class="list-group-item d-flex justify-content-between align-items-center">' + level.namakomplead + " - " + level.namalvlkomplead + '<button type="button" class="btn btn-danger btn-sm delete-item" data-ididentitasjbtn="' + level.ididentitasjbtn + '" data-idkomplead="' + level.idkomplead + '">' + '<i class="fa-solid fa-trash"></i>' + '</button>' + '</li>'; } else { return ''; } }).join(''); $('#listContainer').html(listItems); // Tambahkan event listener untuk tombol hapus $('.delete-item').on('click', function() { var ididentitasjbtn = $(this).data('ididentitasjbtn'); var idkomplead = $(this).data('idkomplead'); var listItem = $(this).closest('li'); var routeUrlhapus = $('#modal-komplead').data('route4'); // Tampilkan popup konfirmasi if (confirm("Apakah Anda yakin ingin menghapus data ini?")) { $.ajax({ url: routeUrlhapus, headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json' }, type: 'POST', data: JSON.stringify({ ididentitasjbtn: ididentitasjbtn, idkomplead: idkomplead }), success: function(response) { // Tangani respons sukses dari server console.log(response); listItem.remove(); // Hapus elemen <li> dari DOM }, error: function(xhr, status, error) { console.error(error); // Tangani kesalahan } }); } }); }, error: function(xhr, status, error) { console.error(error); // Tangani kesalahan } }); });
Editor is loading...
Leave a Comment