Untitled
unknown
plain_text
a year ago
30 kB
5
Indexable
script <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); fetchProficiencylead(selectedId); } }); }); }); 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 dataFetch = response.result.result.find((data) => { return data.namakomplead == selectedText; }); descriptionElement.text(dataFetch.desckomplead || ''); } 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.'); } }); } function fetchProficiencylead(selectedId) { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var fetchUrl = $('#modal-komplead').data('route3'); $.ajax({ url: fetchUrl, type: 'GET', data: { ididentitasjbtn: idIdentitas, idkomplead: selectedId }, success: function (response) { console.log('Proficiency fetch response:', response); var proficiencyBody = $('#proficiency-body'); proficiencyBody.empty(); // Clear existing rows if (response.result && response.result.result.length > 0) { var item = response.result.result[0]; // Assuming only one proficiency per competency var row = '<tr>' + '<td>' + item.namalvlkomplead + '</td>' + '<td>' + (item.indikator || 'No indicator available') + '</td>' + '</tr>'; proficiencyBody.append(row); } else { var row = '<tr><td colspan="2">No proficiency data found.</td></tr>'; proficiencyBody.append(row); } }, error: function (xhr, status, error) { console.error('Error fetching proficiency:', error); var proficiencyBody = $('#proficiency-body'); proficiencyBody.empty(); var row = '<tr><td colspan="2">Error fetching proficiency data.</td></tr>'; proficiencyBody.append(row); } }); } </script> 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 class="proficiency-kompetensi"> <p style="font-weight: 600; text-align:left">Proficiency:</p> <table class="table table-bordered" id="proficiency-table"> <thead> <tr> <th>Level</th> <th>Indicator</th> </tr> </thead> <tbody id="proficiency-body"> <!-- Proficiency data will be appended here --> </tbody> </table> </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> js // function for filter function selectStatus(value) { document.getElementById('filter-status').innerText = value; } function deleteBtn(value){ var option = document.querySelector('.kompetensi-select option[value="' + value + '"]'); option.disabled = false } document.addEventListener('DOMContentLoaded', function() { var dropdownItems = document.querySelectorAll('.dropdown-item'); dropdownItems.forEach(function(item) { item.addEventListener('click', function(event) { event.preventDefault(); // Prevent the default action of the anchor tag // Extracting the value from the clicked anchor tag's text content var value = this.textContent.trim(); // Assuming you want to pass different values to each function based on the clicked item if (this.parentElement.parentElement.id === 'dropdown-status') { selectStatus(value); } }); }); }); $('.select2').each(function() { $(this).select2({ placeholder: $(this).data('placeholder') || 'Pilih' }); }); $(document).ready(function() { $(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 } }); // Event listener for .kompetensi-select change event $(document).on('change', '.kompetensi-select', function() { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var selectedOption = $(this).val(); var selectedText = $(this).find('option:selected').data('namakomplead'); var idkompetensilead = $(this).find('option:selected').data('idkompetensilead'); var routeUrl = $('#modal-komplead').data('route2'); var disabledData = $(this).find('option:selected') disabledData.prop('disabled', true) // AJAX Request $.ajax({ url: routeUrl, // Ganti dengan URL endpoint API Anda type: 'GET', data: { ididentitasjbtn: idIdentitas, idkompetensilead: idkompetensilead }, success: function(response) { // Tambahkan logika Anda untuk menangani respons dari server di sini // Misalnya, cetak respons ke konsol var levels = response.result.result; var levelOptions = levels.map(function(level) { return '<option value="' + level.idkomplead + '">' + level.namalvlkomplead + '</option>'; }).join(''); var row = '<div class="row mb-2" style="padding-right: 10px;">' + '<div class="col-7"><input type="text" class="form-control" value="' + selectedText + '" disabled></div>' + '<input type="hidden" name="kompetensi_id[]" value="' + selectedOption + '">' + '<input type="hidden" name="idkompetensilead[]" value="' + idkompetensilead + '">' + '<div class="col-3"><select class="form-select" name="kompetensi_level[]" aria-label="Default select example">' + levelOptions + '</select></div>' + `<div class="col-1"><button onclick="deleteBtn(${selectedOption})" type="button" class="btn btn-danger delete-row" data-toggle="tooltip" title="Hapus" data-placement="bottom"><i class="fa-solid fa-trash"></i></button></div>` + '</div>'; $('#selectedKompetensiLead').append(row); $('[data-toggle="tooltip"]').tooltip(); }, error: function(xhr, status, error) { console.error(error); // Tangani kesalahan } }); }); }); $('#modal-komplead').on('hidden.bs.modal', function () { $(document).off('change', '.kompetensi-select'); }); $(document).on('submit', '#form-komplead', function(e) { e.preventDefault(); var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var dataToUpdate = []; $('#selectedKompetensiLead .row').each(function() { var idKomplead = $(this).find('input[name="kompetensi_id[]"]').val(); var idKompetensiLead = $(this).find('select[name="kompetensi_level[]"]').val(); dataToUpdate.push({ ididentitas: idIdentitas, idkomplead: idKomplead, idkompetensilead: idKompetensiLead }); }); var jsonData = { dataToUpdate: dataToUpdate }; var routeUrl = $('#modal-komplead').data('route'); var csrfToken = $('meta[name="csrf-token"]').attr('content'); $.ajax({ url: routeUrl, method: 'POST', headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json' }, data: JSON.stringify(jsonData), success: function(response) { alert('Data has been saved successfully.'); $('#modal-komplead').modal('hide'); location.reload(); }, error: function(xhr, status, error) { alert('An error occurred while saving the data.'); } }); }); // Listen for click on delete button (since it's dynamically added) $(document).on('click', '.delete-row', function() { var row = $(this).closest('.row'); console.log(row); // Dispose of the tooltips row.find('[data-toggle="tooltip"]').tooltip('dispose'); // Remove the entire row row.remove(); }); }); }); $(document).ready(function() { $('#modal-kompsoft').on('shown.bs.modal', function () { $('.select2').select2({ dropdownParent: $('#modal-kompsoft'), placeholder: "Pilih", allowClear: true, }); var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var routeUrl = $('#modal-kompsoft').data('route3'); var routeUrlkompetensi = $('#modal-kompsoft').data('route5'); $.ajax({ url: routeUrl, type: 'GET', data: { ididentitasjbtn: idIdentitas }, success: function(response) { var levels = response.result.result; var listItems = levels.map(function(level) { return '<li class="list-group-item d-flex justify-content-between align-items-center">' + level.namakomphardsoft + '<button type="button" class="btn btn-danger btn-sm delete-item" data-ididentitasjbtn="' + level.ididentitasjbtn + '" data-idkompsoft="' + level.idkomphardsoft + '">' + '<i class="fa-solid fa-trash"></i>' + '</button>' + '</li>'; }).join(''); $('#listContainersoft').html(listItems); $('.delete-item').on('click', function() { var ididentitasjbtn = $(this).data('ididentitasjbtn'); var idkompsoft = $(this).data('idkompsoft'); var listItem = $(this).closest('li'); var routeUrlhapus = $('#modal-kompsoft').data('route4'); 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, idhardsoft: idkompsoft }), success: function(response) { console.log(response); listItem.remove(); }, error: function(xhr, status, error) { console.error(error); } }); } }); }, error: function(xhr, status, error) { console.error(error); } }); $.ajax({ url: routeUrlkompetensi, type: "GET", data: { koderumpun: 0, kodejeniskomp: 2, ididentitasjbtn: idIdentitas, }, success: function(response) { var kompetensiDropdown = $('#kompetensisoft'); kompetensiDropdown.empty(); $.each(response.result.result, function(index, item) { kompetensiDropdown.append($('<option>', { value: item.iddictkomphardsoft, text: item.namakomphardsoft, 'data-iddictkomphardsoft': item.iddictkomphardsoft, 'data-koderumpun': 0, 'data-namakomphardsoft': item.namakomphardsoft })); }); }, error: function(xhr, status, error) { console.error(xhr.responseText); } }); }); }); $(document).on('change', '#kompetensisoft', function() { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var selectedOption = $(this).val(); var iddictkomphardsoft = $(this).find('option:selected').data('iddictkomphardsoft'); var koderumpun = $(this).find('option:selected').data('koderumpun'); var namakomphardsoft = $(this).find('option:selected').data('namakomphardsoft'); var routeUrl = $('#modal-kompsoft').data('route2'); $.ajax({ url: routeUrl, type: 'GET', data: { iddictkomphardsoft: iddictkomphardsoft, ididentitasjbtn: idIdentitas, }, success: function(response) { var levels = response.result.result; var levelOptions = levels.map(function(level) { return '<option value="' + level.idkomphardsoft + '">' + level.lvlkomphardsoft + '</option>'; }).join(''); var row = '<div class="row mb-2" style="padding-right: 10px;">' + '<div class="col-7"><input type="text" class="form-control" value="' + namakomphardsoft + '" disabled></div>' + '<input type="hidden" name="ididentitasjbtn[]" value="' + idIdentitas + '">' + '<input type="hidden" name="iddictkomphardsoft[]" value="' + iddictkomphardsoft + '">' + '<div class="col-3"><select class="form-select" name="idkomphardsoft[]" aria-label="Default select example">' + levelOptions + '</select></div>' + '<div class="col-1"><button onclick="deleteBtn(' + selectedOption + ')" type="button" class="btn btn-danger delete-row" data-toggle="tooltip" title="Hapus" data-placement="bottom"><i class="fa-solid fa-trash"></i></button></div>' + '</div>'; $('#selectedKompetensiSoft').append(row); $('[data-toggle="tooltip"]').tooltip(); }, error: function(xhr, status, error) { console.error(error); } }); }); $(document).on('submit', '#form-kompsoft', function(e) { e.preventDefault(); var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var dataToUpdate = []; $('#selectedKompetensiSoft .row').each(function() { var iddictkomphardsoft = $(this).find('input[name="iddictkomphardsoft[]"]').val(); var idkomphardsoft = $(this).find('select[name="idkomphardsoft[]"]').val(); dataToUpdate.push({ ididentitas: idIdentitas, iddictkomphardsoft: iddictkomphardsoft, idkomphardsoft: idkomphardsoft }); }); var jsonData = { dataToUpdate: dataToUpdate }; var routeUrl = $('#modal-kompsoft').data('route'); var csrfToken = $('meta[name="csrf-token"]').attr('content'); $.ajax({ url: routeUrl, method: 'POST', headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json' }, data: JSON.stringify(jsonData), success: function(response) { alert('Data has been saved successfully.'); $('#modal-kompsoft').modal('hide'); location.reload(); }, error: function(xhr, status, error) { alert('An error occurred while saving the data.'); } }); }); $(document).ready(function () { $('#modal-komphard').on('shown.bs.modal', function () { $('.select2').select2({ dropdownParent: $('#modal-komphard'), placeholder: "Pilih", allowClear: true, }); // $('#form-komphard').on('submit', function(e) { // e.preventDefault(); // Prevent the default form submission // // Display an alert // alert('Form submitted successfully!'); // Optionally, you can proceed with form submission via AJAX or other methods here /* var formData = new FormData(this); $.ajax({ url: $(this).attr('action'), method: 'POST', data: formData, processData: false, contentType: false, headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }, success: function(response) { console.log('Form submitted successfully:', response); // Additional actions on success }, error: function(xhr, status, error) { console.error('Error submitting form:', error); } }); */ // }); }); }); // Listen for click on delete button (since it's dynamically added) $(document).on('click', '.delete-row', function() { // var disabledData = $(this).find('option:selected') // disabledData.prop('disabled', false) var row = $(this).closest('.row'); console.log(row); // Dispose of the tooltips row.find('[data-toggle="tooltip"]').tooltip('dispose'); // Remove the entire row row.remove(); }); $(document).on('change', '#kompetensisoft', function() { var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var selectedOption = $(this).val(); var iddictkomphardsoft = $(this).find('option:selected').data('iddictkomphardsoft'); var koderumpun = $(this).find('option:selected').data('koderumpun'); var namakomphardsoft = $(this).find('option:selected').data('namakomphardsoft'); var routeUrl = $('#modal-kompsoft').data('route2'); // var disabledData = $(this).find('option:selected') // disabledData.prop('disabled', true) // AJAX Request $.ajax({ url: routeUrl, // Ganti dengan URL endpoint API Anda type: 'GET', data: { iddictkomphardsoft: iddictkomphardsoft, ididentitasjbtn: idIdentitas, }, success: function(response) { var levels = response.result.result; console.log(levels); var levelOptions = levels.map(function(level) { return '<option value="' + level.idkomphardsoft + '">' + level.lvlkomphardsoft + '</option>'; }).join(''); var row = '<div class="row mb-2" style="padding-right: 10px;">' + '<div class="col-7"><input type="text" class="form-control" value="' + namakomphardsoft + '" disabled></div>' + '<input type="hidden" name="ididentitasjbtn[]" value="' + idIdentitas + '">' + '<input type="hidden" name="iddictkomphardsoft[]" value="' + iddictkomphardsoft + '">' + '<div class="col-3"><select class="form-select" name="idkomphardsoft[]" aria-label="Default select example">' + levelOptions + '</select></div>' + `<div class="col-1"><button onclick="deleteBtn(${selectedOption})" type="button" class="btn btn-danger delete-row" data-toggle="tooltip" title="Hapus" data-placement="bottom"><i class="fa-solid fa-trash"></i></button></div>` + '</div>'; $('#selectedKompetensiSoft').append(row); $('[data-toggle="tooltip"]').tooltip(); }, error: function(xhr, status, error) { console.error(error); // Tangani kesalahan } }); }); $(document).ready(function() { $(document).on('submit', '#form-kompsoft', function(e) { e.preventDefault(); var idIdentitas = $('input[name="ididentitasjbtn"]').val(); var dataToUpdate = []; $('#selectedKompetensiSoft .row').each(function() { var iddictkomphardsoft = $(this).find('input[name="iddictkomphardsoft[]"]').val(); var idkomphardsoft = $(this).find('select[name="idkomphardsoft[]"]').val(); dataToUpdate.push({ ididentitas: idIdentitas, iddictkomphardsoft: iddictkomphardsoft, idkomphardsoft: idkomphardsoft }); }); var jsonData = { dataToUpdate: dataToUpdate }; var routeUrl = $('#modal-kompsoft').data('route'); var csrfToken = $('meta[name="csrf-token"]').attr('content'); $.ajax({ url: routeUrl, method: 'POST', headers: { 'X-CSRF-TOKEN': csrfToken, 'Content-Type': 'application/json' }, data: JSON.stringify(jsonData), success: function(response) { alert('Data has been saved successfully.'); $('#modal-kompsoft').modal('hide'); location.reload(); }, error: function(xhr, status, error) { alert('An error occurred while saving the data.'); } }); }); });
Editor is loading...
Leave a Comment