Initially posted @ https://codeanddeploy.com go to and obtain the pattern code: https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8
On this put up, I am sharing the best way to combine Bootbox alert & affirmation with ajax in Laravel 8. We’re utilizing Bootbox to substantiate the jquery ajax delete in Laravel. When deleting data we’d like affirmation to forestall sudden clicks of the delete button.
On this instance, we’ve a controller, mannequin, route, and blade. Simply proceed to learn the beneath steps:
Route:
Route::useful resource('posts', PostsController::class);
Controller:
/**
* Take away the required useful resource from storage.
*
* @param AppModelsPost $put up
* @return IlluminateHttpResponse
*/
public perform destroy(Publish $put up)
{
$put up->delete();
return response('Publish deleted efficiently.', 200);
}
Mannequin:
<?php
namespace AppModels;
use IlluminateDatabaseEloquentFactoriesHasFactory;
use IlluminateDatabaseEloquentModel;
class Publish extends Mannequin
{
protected $fillable = [
'title',
'description',
'body'
];
use HasFactory;
}
Blade:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta identify="csrf-token" content material="{{ csrf_token() }}">
<meta http-equiv="X-UA-Appropriate" content material="IE=edge">
<title>Delete Report utilizing Ajax in Laravel 8 - codeanddeploy.com</title>
<meta identify="viewport" content material="width=device-width, initial-scale=1">
<hyperlink rel="stylesheet" href="https://cdn.jsdelivr.internet/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.internet/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<script sort="textual content/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>
<script sort="textual content/javascript">
$(doc).prepared(perform() {
$('.delete-form').on('submit', perform(e) {
e.preventDefault();
var button = $(this);
bootbox.affirm({
title: "Are you positive?",
message: "Your about to delete this put up!",
buttons: {
affirm: {
label: 'Sure',
className: 'btn-success'
},
cancel: {
label: 'No',
className: 'btn-danger'
}
},
callback: perform (end result) {
if(end result) {
$.ajax({
sort: 'put up',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content material')
},
url: button.knowledge('route'),
knowledge: {
'_method': 'delete'
},
success: perform (response, textStatus, xhr) {
bootbox.alert({
message: response,
callback: perform () {
window.location='/posts'
}
});
}
});
}
}
});
})
});
</script>
</head>
<physique>
<div class="container mt-5">
@if(Session::get('success', false))
<?php $knowledge = Session::get('success'); ?>
@if (is_array($knowledge))
@foreach ($knowledge as $msg)
<div class="alert alert-success" function="alert">
<i class="fa fa-check"></i>
{{ $msg }}
</div>
@endforeach
@else
<div class="alert alert-success" function="alert">
<i class="fa fa-check"></i>
{{ $knowledge }}
</div>
@endif
@endif
<desk class="desk table-striped" id="users-table">
<thead>
<tr>
<th scope="col"><enter sort="checkbox" class="check-all"></th>
<th scope="col">Title</th>
<th scope="col">Description</th>
<th scope="col">Physique</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
@foreach($posts as $put up)
<tr>
<td><enter sort="checkbox" class="verify"></td>
<td>{{$post->title}}</td>
<td>{{$post->description}}</td>
<td>{{$post->physique}}</td>
<td>
<kind methodology="put up" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
@methodology('delete')
<button sort="submit" class="btn btn-danger btn-sm">Delete</button>
</kind>
</td>
</tr>
@endforeach
</tbody>
</desk>
</div>
</physique>
</html>
For extra particulars about Bootbox go to their documentation.
I hope this tutorial can assist you. Kindly go to right here https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8 if you wish to obtain this code.
Blissful coding 🙂