I am trying to create a modal which asks the users if they are willing to delete a record from the table. If they agree, they select the 'delete user' button and the record is deleted from the database. I have tried to pass the value of the 'id' from the table to the modal but it doesn't work. When a user clicks on delete, it should pass the 'id' to the modal and then when the user confirms, it should delete the record. How can I achieve this. Here is a snippet of my code.
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<!-- <th></th> -->
<th>Username</th>
<th>Contact</th>
<th>Email</th>
<th>Role Type</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
@foreach ($data as $datas)
<tr>
<td>{{ $datas->name }}</td>
<td>{{ $datas->contact }}</td>
<td>{{ $datas->email }}</td>
<td>Role Type</td>
<td>
<div class="btn-group">
<a href="" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit" title="Edit"></i></a>
<a href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
Delete User Modal
<div class="modal fade" id="delete-modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span></button>
<h4 class="modal-title" align="center"><b>Delete User</b></h4>
</div>
<div class="modal-body">
<h4 align="center">Are you sure you want to delete this user?</h4>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-danger">Delete User</button>
</div>
</div>
</div>
</div>
Change your anchor tag from
<a href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash" title="Delete"></i>
</a>
to
<a href="#" data-href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal">
<i class="fa fa-trash" title="Delete"></i>
</a>
Next in your modal, add a form
, or enclose the submit button within a form
<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<form id="deleteResource" method="post">
{{ csrf_field() }}
{{ method_field('DELETE') }}
<button type="submit" class="btn btn-danger">Delete User</button>
</form>
</div>
and while your modal is being shown, you could make use of event.relatedTarget
$('#delete-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var href = button.data('href'); // Extract info from data-* attributes
$("#deleteResource").attr('action', href);
});
Start with adding the user's id to the row so it can be grabbed via script:
<div class="btn-group">
<a href="" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit" title="Edit"></i></a>
<a href="#" class="delete-btn" id="{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
</div>
// add a hidden form to the modal
<form id="delete-user-form" method="post" action="">
{{ csrf_field() }}
{{ method_field('delete') }}
</form>
// add a script to grab the user's id from the row clicked, set
// the form's action and another event listener for the confirm delete click
<script>
document.querySelector('.delete-btn').forEach(el => {
var userId = el.id
el.addEventListener('click', e => {
var form = document.getElementById('delete-user-form')
form.setAttribute('action', '/users/' + userId)
var btn = document.querySelector('.modal-footer .btn-danger')[0]
var listener = () => { form.submit(); btn.removeEventListener(listener) }
btn.addEventListener('click', listener)
})
</script>
set the id in data field:
<a href="/delete/{{ $datas->id }}" data-toggle="modal" class=".delete" data-id="{{ $datas->id }}" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
In js open the modal and set id in that modal field:
$(document).on("click", ".delete", function () {
var delid = $(this).data('id');
$('#deleteThis').data('deleteThis', delid); //setter
$('#delete-modal').modal('show');
});
change the button id to have the id to delete :
<button type="button" id="deleteThis" class="btn btn-danger">Delete User</button>
on click of delete button call a route via ajax to delete that user:
$(document).on("click", "#deleteThis", function(){
var id = $(this).data("deleteThis");
loaderShow();
$.ajax(
{
url: "delete/"+id,
type: 'POST',
data: {
"id": id,
"_method": 'DELETE',
},
success: function (data)
{
$('#delete-modal').modal('hide');
},
error: function(data) {
}
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.