Updated Participant to auto default to yes radio button option and then if no is selected auto fill possible employers from database entry after 2 characters are entered. Also changed destroy options within this model.
This commit is contained in:
parent
2de94bd706
commit
02d8612409
|
@ -31,15 +31,21 @@
|
|||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
|
||||
<div>
|
||||
<%= radio_button_tag 'is_employer', 'yes', false, class: 'form-check-input' %>
|
||||
<%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
|
||||
<%= radio_button_tag 'is_employer', 'no', true, class: 'form-check-input' %>
|
||||
<%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
|
||||
<%= form.label :is_employer, 'Is this participant also an employer?', class: 'form-label' %>
|
||||
<div>
|
||||
<%= radio_button_tag 'is_employer', 'yes', true, class: 'form-check-input' %>
|
||||
<%= label_tag 'is_employer_yes', 'Yes', class: 'form-check-label' %>
|
||||
<%= radio_button_tag 'is_employer', 'no', false, class: 'form-check-input' %>
|
||||
<%= label_tag 'is_employer_no', 'No', class: 'form-check-label' %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="employer-input" class="mb-3" style="display: none;">
|
||||
<%= label_tag :employer_name, 'Employer Name', class: 'form-label' %>
|
||||
<%= text_field_tag :employer_name, nil, id: 'employer-autocomplete', class: 'form-control', placeholder: 'Start typing employer name...' %>
|
||||
<!-- Optionally, add a hidden field to store the selected employer's ID -->
|
||||
<%= hidden_field_tag :employer_id, nil, id: 'selected-employer-id' %>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<%= form.label :mci, 'MCI', class: 'form-label' %>
|
||||
|
@ -154,25 +160,48 @@
|
|||
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
|
||||
|
||||
<script>
|
||||
$(document).ready(function() {
|
||||
$('#employer-autocomplete').autocomplete({
|
||||
source: function(request, response) {
|
||||
$.ajax({
|
||||
url: '/employers/search', // Rails endpoint for searching employers
|
||||
dataType: "json",
|
||||
data: { term: request.term },
|
||||
success: function(data) {
|
||||
response(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
minLength: 2, // Minimum characters to trigger the search
|
||||
select: function(event, ui) {
|
||||
// Function to handle selection
|
||||
$('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer
|
||||
// You might want to set a hidden field with employer ID if needed
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$(document).ready(function() {
|
||||
$('#employer-autocomplete').autocomplete({
|
||||
source: function(request, response) {
|
||||
$.ajax({
|
||||
url: '/employers/search', // Rails endpoint for searching employers
|
||||
dataType: "json",
|
||||
data: { term: request.term },
|
||||
success: function(data) {
|
||||
response(data);
|
||||
}
|
||||
});
|
||||
},
|
||||
minLength: 2, // Minimum characters to trigger the search
|
||||
select: function(event, ui) {
|
||||
// Function to handle selection
|
||||
$('#employer-autocomplete').val(ui.item.label); // ui.item.label should contain the name of the employer
|
||||
$('#selected-employer-id').val(ui.item.value); // Set the employer ID in the hidden field
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
<%# This is to change the Employer input field on Radio Button selection %>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const employerInputDiv = document.getElementById('employer-input');
|
||||
const radioButtons = document.getElementsByName('is_employer');
|
||||
|
||||
for (const radioButton of radioButtons) {
|
||||
radioButton.addEventListener('change', function() {
|
||||
if (this.value === 'no') {
|
||||
employerInputDiv.style.display = 'block';
|
||||
} else {
|
||||
employerInputDiv.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
<div class="mt-3 d-flex justify-content-between">
|
||||
<%= link_to 'Show', @participant, class: "btn btn-info" %>
|
||||
<%= link_to 'Back to List', participants_path, class: "btn btn-secondary" %>
|
||||
<%= link_to 'Delete', @participant, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
<td><%= participant.gender %></td>
|
||||
<td><%= link_to 'Show', participant, class: 'btn btn-sm btn-info' %></td>
|
||||
<td><%= link_to 'Edit', edit_participant_path(participant), class: 'btn btn-sm btn-primary' %></td>
|
||||
<td><%= link_to 'Destroy', participant, method: :delete, data: { confirm: 'Are you sure?' }, class: 'btn btn-sm btn-danger' %></td>
|
||||
|
||||
</tr>
|
||||
<% end %>
|
||||
</tbody>
|
||||
|
|
Loading…
Reference in New Issue