Please i want to delete a specific record based on its data-id
as: data-id="delete-form-{{ $position->id }
}, but anytime i try it always returns the last record id and cant even delete.
below is my code
@forelse ($pos as $position)
<tr>
<td>{{ $loop->index+1 }}</td>
<td>{{ $position->name }}</td>
<td>{{ $position->created_at->diffForHumans() }}</a></td>
<td><a class="btn btn-warning" href="{{ route('position.edit', $position->id) }}"><i class="fa fa-fw fa-lg fa-edit"></i>Edit</a></td>
<td>
<form data-id="delete-form-{{ $position->id }}" action="{{ route('position.destroy', $position->id) }}" method="POST" style="display:none">
@csrf
@method('DELETE')
</form>
<a class="posSwal btn btn-sm btn-danger" href="" onclick="isConfirm()">
<i class="fa fa-fw fa-lg fa-times-circle"></i>Delete</a>
</td>
</tr>
@empty
<p>No Record available</p>
@endforelse
JavaScript
<script>
$('.posSwal').click(function(){
event.preventDefault();
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
$("form").data("id").submit();
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
but anytime i try it always returns the last record id and cant even delete.
This happens because you don't refer to the current clicked anchor element. In your click handler you can save the current anchor before preventDefault:
let ele = this;
and in your swal you can compute the current id and url in order to use ajax instead of submitting the form:
var id = $(ele).closest('td').find("form").data("id");
var url = $(ele).closest('td').find("form").attr('action');
$.post(url, { id: id });
function isConfirm() {
}
$('.posSwal').on('click', function(e){
event.preventDefault();
let ele = this;
swal({
title: "Are you sure?",
text: "You will not be able to recover this imaginary file!",
type: "warning",
showCancelButton: true,
confirmButtonText: "Yes, delete it!",
cancelButtonText: "No, cancel plx!",
closeOnConfirm: false,
closeOnCancel: false
}, function(isConfirm) {
if (isConfirm) {
var id = $(ele).closest('td').find("form").data("id");
var url = $(ele).closest('td').find("form").attr('action');
console.log('current id is: ' + id);
$.post(url, { id: id });
swal("Deleted!", "Your imaginary file has been deleted.", "success");
} else {
swal("Cancelled", "Your imaginary file is safe :)", "error");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/bootstrap-sweetalert@master/dist/sweetalert.css">
<script src="https://cdn.jsdelivr.net/gh/lipis/bootstrap-sweetalert@master/dist/sweetalert.min.js"></script>
<table>
<tbody>
<tr>
<td>{{ $loop->index+1 }}</td>
<td>{{ $position->name }}</td>
<td>{{ $position->created_at->diffForHumans() }}</a></td>
<td><a class="btn btn-warning" href="{{ route('position.edit', $position->id) }}"><i class="fa fa-fw fa-lg fa-edit"></i>Edit</a></td>
<td>
<form data-id="delete-form-1" action="{{ route('position.destroy', $position->id) }}" method="POST" style="display:none">
@csrf
@method('DELETE')
</form>
<a class="posSwal btn btn-sm btn-danger" href="" onclick="isConfirm()">
<i class="fa fa-fw fa-lg fa-times-circle"></i>Delete</a>
</td>
</tr>
<tr>
<td>{{ $loop->index+1 }}</td>
<td>{{ $position->name }}</td>
<td>{{ $position->created_at->diffForHumans() }}</a></td>
<td><a class="btn btn-warning" href="{{ route('position.edit', $position->id) }}"><i class="fa fa-fw fa-lg fa-edit"></i>Edit</a></td>
<td>
<form data-id="delete-form-2" action="{{ route('position.destroy', $position->id) }}" method="POST" style="display:none">
@csrf
@method('DELETE')
</form>
<a class="posSwal btn btn-sm btn-danger" href="" onclick="isConfirm()">
<i class="fa fa-fw fa-lg fa-times-circle"></i>Delete</a>
</td>
</tr>
</tbody>
</table>
</div>