After creating a small Ajax script to remove items from my database and view, I encountered an issue where the view was only updated after a reload when the item was removed.
I want to avoid reloading the entire page by using window.location.reload() in my success function. Is there a way to handle this so that the item is removed from the view without the need for a full page reload?
<script>
$(document).ready(function() {
$(".destroy-device").click(function(e) {
e.preventDefault();
var id = $(this).attr("data-id");
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
});
$.ajax({
url: 'destroy/'+id,
type: 'post',
data: {_method: 'delete',
id: id},
success:function(data) {
console.log('success');
}
});
})
});
</script>
HTML:
<form method="post">
<input type="hidden" name="_method" value="delete">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="id" value="{{ $deviceValue->id }}">
<button type="button" class="btn btn-danger destroy-device" data-id="{{ $deviceValue->id }}" name="destroy_device">
<span class="glyphicon glyphicon-trash"></span>
</button>
</form>