I have a dynamically populated set of select menus that I am trying to make sticky. The whole set of parent select menu along with the 4 dynamic select menus is able to be cloned via jQuery. When the page is displayed I have one select menu followed by 4 select menus that are dynamically populated based on the selection of the first select menu.
Here is my code for the parent select and child selects:
@php if (request()->has('procedures')) {
$count = count(request()->toArray()['procedures']);
} elseif (isset(request()->old()['procedures'])) {
$count = count(request()->old()['procedures']);
} else {
$count = 1;
} @endphp
@for($i = 0; $i < $count; $i++)
<div class="clonedProcedure" data-procedure-id="">
<div class="row mb-3">
<div class="col-md-8">
<select class="form-control form-control-sm procedureSelect"
id="procedure_"
name="procedures[][id]">
<option value="">Select Procedure</option>
@foreach($procedures as $procedure)
<option value=""
>
</option>
@endforeach
</select>
</div>
<div class="col-md-2">
<input type="text"
class="form-control form-control-sm"
name="procedures[][units]"
value=""
placeholder="Units" />
</div>
<div class="col-md-2">
<div class="btn-group btn-group-sm" role="group" aria-label="Add/Delete Buttons">
<button type="button" class="btn btn-primary addProcedure" data-procedure-id="">
<i class="fa fa-plus"></i>
</button>
<button type="button" class="btn btn-danger deleteProcedure" data-procedure-id="">
<i class="fa fa-minus"></i>
</button>
</div>
</div>
</div>
<div class="row mb-2">
<div class="col-md-2 text-right">
<label>Modifiers</label>
</div>
<div class="col-md-2">
<input type="text"
class="form-control form-control-sm"
name="procedures[][modifiers][0]"
value="" />
</div>
<div class="col-md-2">
<input type="text"
class="form-control form-control-sm"
name="procedures[][modifiers][1]"
value="" />
</div>
<div class="col-md-2">
<input type="text"
class="form-control form-control-sm"
name="procedures[][modifiers][2]"
value="" />
</div>
<div class="col-md-2">
<input type="text"
class="form-control form-control-sm"
name="procedures[][modifiers][3]"
value="" />
</div>
</div>
<div class="clonedDiagnosis" data-procedure-id="">
<div class="row mb-2">
<div class="col-md-1"> </div>
<div class="col-md-9">
<select class="form-control form-control-sm diagnosisSelect"
data-procedure-id=""
name="procedures[][diagnoses][0]">
<option value="">Select Diagnosis</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-md-1"> </div>
<div class="col-md-9">
<select class="form-control form-control-sm diagnosisSelect"
data-procedure-id=""
name="procedures[][diagnoses][1]">
<option value="">Select Diagnosis</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-md-1"> </div>
<div class="col-md-9">
<select class="form-control form-control-sm diagnosisSelect"
data-procedure-id=""
name="procedures[][diagnoses][2]">
<option value="">Select Diagnosis</option>
</select>
</div>
</div>
<div class="row mb-2">
<div class="col-md-1"> </div>
<div class="col-md-9">
<select class="form-control form-control-sm diagnosisSelect"
data-procedure-id=""
name="procedures[][diagnoses][3]">
<option value="">Select Diagnosis</option>
</select>
</div>
</div>
</div>
<hr />
</div>
@endfor
Here is my jQuery code:
$(document).on('change', '.procedureSelect', function() {
let procedureCount = $(this).attr('id').replace('procedure_', '');
let procedureId = $(this).val();
$.ajax({
url: '',
method: 'get',
data: {
'procedure_id': procedureId
}
}).done(function(response) {
let diagnosisSelect = $('select[data-procedure-id=' + procedureCount + ']');
diagnosisSelect.each(function() {
diagnosisSelect.empty().append('<option value="">Select Diagnosis</option>');
$.each(response, function(i, d) {
$(diagnosisSelect).append('<option value="' + d.id + '">' + d.name + ' [' + d.code + ']</option>');
});
});
}).fail(function() {
alert('A server error occurred while trying to fetch diagnoses.')
}).always(function() {
});
});
/**
* Add a procedure select menu.
*/
$(document).on('click', '.addProcedure', function(event) {
event.preventDefault();
let procedureId = $(this).data('procedure-id');
let newProcedureId = (procedureId + 1);
let clonedProcedure = $('.clonedProcedure:last').clone();
// Update the index for the procedure ID and procedure units fields
clonedProcedure
.find('select[name="procedures[' + procedureId + '][id]"]')
.attr('id', 'procedure_' + newProcedureId)
.attr('name', 'procedures[' + newProcedureId + '][id]');
clonedProcedure
.find('input[name="procedures[' + procedureId + '][units]"]')
.attr('name', 'procedures[' + newProcedureId + '][units]')
.val('');
// Update the procedure ID of the added modifiers (all 4 of them)
clonedProcedure
.find('input[name="procedures[' + procedureId + '][modifiers][0]"]')
.attr('name', 'procedures[' + newProcedureId + '][modifiers][0]')
.val('');
clonedProcedure
.find('input[name="procedures[' + procedureId + '][modifiers][1]"]')
.attr('name', 'procedures[' + newProcedureId + '][modifiers][1]')
.val('');
clonedProcedure
.find('input[name="procedures[' + procedureId + '][modifiers][2]"]')
.attr('name', 'procedures[' + newProcedureId + '][modifiers][2]')
.val('');
clonedProcedure
.find('input[name="procedures[' + procedureId + '][modifiers][3]"]')
.attr('name', 'procedures[' + newProcedureId + '][modifiers][3]')
.val('');
// Ensure the diagnosis fields have the correct procedure ID
clonedProcedure
.find('select[name="procedures[' + procedureId + '][diagnoses][0]"]')
.attr('data-procedure-id', newProcedureId)
.attr('name', 'procedures[' + newProcedureId + '][diagnoses][0]');
clonedProcedure
.find('select[name="procedures[' + newProcedureId + '][diagnoses][0]"]')
.empty()
.append('<option value="">Select Diagnosis</option>');
clonedProcedure
.find('select[name="procedures[' + procedureId + '][diagnoses][1]"]')
.attr('data-procedure-id', newProcedureId)
.attr('name', 'procedures[' + newProcedureId + '][diagnoses][1]');
clonedProcedure
.find('select[name="procedures[' + newProcedureId + '][diagnoses][1]"]')
.empty()
.append('<option value="">Select Diagnosis</option>');
clonedProcedure
.find('select[name="procedures[' + procedureId + '][diagnoses][2]"]')
.attr('data-procedure-id', newProcedureId)
.attr('name', 'procedures[' + newProcedureId + '][diagnoses][2]');
clonedProcedure
.find('select[name="procedures[' + newProcedureId + '][diagnoses][2]"]')
.empty()
.append('<option value="">Select Diagnosis</option>');
clonedProcedure
.find('select[name="procedures[' + procedureId + '][diagnoses][3]"]')
.attr('data-procedure-id', newProcedureId)
.attr('name', 'procedures[' + newProcedureId + '][diagnoses][3]');
clonedProcedure
.find('select[name="procedures[' + newProcedureId + '][diagnoses][3]"]')
.empty()
.append('<option value="">Select Diagnosis</option>');
clonedProcedure.insertAfter('.clonedProcedure:last');
renderProcedureDeleteButton();
});
/**
* Delete a procedure select menu
*/
$(document).on('click', '.deleteProcedure', function(event){
event.preventDefault();
let procedureRows = $('.clonedProcedure').length;
if (procedureRows > 1) {
$(this).parent().parent().parent().parent().remove();
}
renderProcedureDeleteButton();
});
My question is, for those of you who have done this before is how do I make the child selects sticky? When I submit the form the initial parent select is remembered but then I have empty child select menus. I have thought of turning the whole cloned HTML into an include file and passing in parameters before rendering it but can it be done with jQuery?
from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2pqErPp
via IFTTT
Aucun commentaire:
Enregistrer un commentaire