I’m trying to fetch the location_name on a delete confirmation modal but it’s not returning any results.
Delete Button:
<li>
<a href="" class="remove" data-id="{{ $location->id }}" data-location_name="{{ $location->location_name }}" data-toggle="modal" data-target="#delete-modal">
<span data-feather="trash-2"></span></a>
</li>
Delete Modal:
{{-- Modal Delete --}}
<div class="modal-info-delete modal fade show" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-sm modal-info" role="document">
<div class="modal-content">
<form action=" {{ route('worklocations_table.destroy',$location->id) }} " method="post">
{{ method_field('delete') }}
{{ csrf_field() }}
{{-- Modal Body --}}
<div class="modal-body">
<div class="atbd-notice__content">
<div class="atbd-notice__top text-center mt-20">
<div class="atbd-notice__icon bg-danger">
<i class="fas fa-exclamation color-white"></i>
</div>
<div class="atbd-notice__text">
<p>Are you sure you want to delete this location?</p>
<div class="mt-15">
<h4>Location Name</h4>
<input type="text" class="form-control" id="id" name="id">
<input type="text" class="form-control" id="location_name" name="location_name">
</div>
</div>
</div>
</div>
</div>
{{-- Modal Buttons --}}
<div class="modal-footer d-flex justify-content-center">
<button type="submit" class="btn btn-default btn-squared btn-outline-primary">Yes, delete</button>
<button type="button" class="btn btn-default btn-squared btn-outline-light" data-dismiss="modal">No</button>
</div>
</form>
</div>
</div>
</div>
{{-- Modal Delete - End --}}
JS jQuery:
<script>
$('#delete-modal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget)
var id = button.data('id')
var location_name = button.data('location_name')
var modal = $(this)
modal.find('modal-body #id').val(id);
modal.find('modal-body #location_name').val(location_name);
})
</script>
Result:
Modal deos Not Showing Data
Answer
You have an error with the missing dot (.) for class modal-body when you are using modal.find, for both values in your ‘JS jQuery’ code. I wrote the comment for you to see where it is and why it is happening.
<script>
$('#delete-modal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget)
var id = button.data('id')
var location_name = button.data('location_name')
var modal = $(this)
// The find function below will not be able to select that
// because "modal-body" is not a valid class selector
modal.find('modal-body #id').val(id);
modal.find('modal-body #location_name').val(location_name);
})
</script>
This will be that same code without the error:
<script>
$('#delete-modal').on('show.bs.modal', function(event){
var button = $(event.relatedTarget)
var id = button.data('id')
var location_name = button.data('location_name')
var modal = $(this);
modal.find('.modal-body #id').val(id);
modal.find('.modal-body #location_name').val(location_name);
})
</script>
You can find more info on jquery .class selectors here: https://api.jquery.com/class-selector/.