Untitled
unknown
plain_text
a year ago
5.1 kB
4
Indexable
modal komplead <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> js <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 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.'); } }); } </script>
Editor is loading...
Leave a Comment