DEV Community

Cover image for Integrate Bootbox Alert & Confirmation with Ajax in Laravel 8
Code And Deploy
Code And Deploy

Posted on

3 2

Integrate Bootbox Alert & Confirmation with Ajax in Laravel 8

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8

In this post, I'm sharing how to integrate Bootbox alert & confirmation with ajax in Laravel 8. We are using Bootbox to confirm the jquery ajax delete in Laravel. When deleting records we need confirmation to prevent unexpected clicks of the delete button.

In this example, we have a controller, model, route, and blade. Just continue to read the below steps:

Route:

Route::resource('posts', PostsController::class);
Enter fullscreen mode Exit fullscreen mode

Controller:

/**
* Remove the specified resource from storage.
*
* @param  \App\Models\Post  $post
* @return \Illuminate\Http\Response
*/
public function destroy(Post $post)
{
    $post->delete();

    return response('Post deleted successfully.', 200);
}
Enter fullscreen mode Exit fullscreen mode

Model:

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    protected $fillable = [
        'title',
        'description',
        'body'
    ];

    use HasFactory;
}
Enter fullscreen mode Exit fullscreen mode

Blade:

<!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Delete Record using Ajax in Laravel 8 - codeanddeploy.com</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/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.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.5.2/bootbox.min.js"></script>

        <script type="text/javascript">
          $(document).ready(function() {

            $('.delete-form').on('submit', function(e) {
              e.preventDefault();
              var button = $(this);

              bootbox.confirm({
                  title: "Are you sure?",
                  message: "Your about to delete this post!",
                  buttons: {
                      confirm: {
                          label: 'Yes',
                          className: 'btn-success'
                      },
                      cancel: {
                          label: 'No',
                          className: 'btn-danger'
                      }
                  },
                  callback: function (result) {
                    if(result) {
                      $.ajax({
                        type: 'post',
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: button.data('route'),
                        data: {
                          '_method': 'delete'
                        },
                        success: function (response, textStatus, xhr) {

                          bootbox.alert({
                              message: response,
                              callback: function () {
                                window.location='/posts'
                              }
                          });
                        }
                      });
                    }
                  }
              });


            })
          });
        </script>
    </head>

    <body>
        <div class="container mt-5">
            @if(Session::get('success', false))
              <?php $data = Session::get('success'); ?>
              @if (is_array($data))
                  @foreach ($data as $msg)
                      <div class="alert alert-success" role="alert">
                          <i class="fa fa-check"></i>
                          {{ $msg }}
                      </div>
                  @endforeach
              @else
                  <div class="alert alert-success" role="alert">
                      <i class="fa fa-check"></i>
                      {{ $data }}
                  </div>
              @endif
            @endif

            <table class="table table-striped" id="users-table">
              <thead>
                <tr>
                  <th scope="col"><input type="checkbox" class="check-all"></th>
                  <th scope="col">Title</th>
                  <th scope="col">Description</th>
                  <th scope="col">Body</th>
                  <th scope="col">Delete</th>
                </tr>
              </thead>
              <tbody>
                @foreach($posts as $post)
                  <tr>
                    <td><input type="checkbox" class="check"></td>
                    <td>{{$post->title}}</td>
                    <td>{{$post->description}}</td>
                    <td>{{$post->body}}</td>
                    <td>
                        <form method="post" class="delete-form" data-route="{{route('posts.destroy',$post->id)}}">
                            @method('delete')
                            <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                        </form>
                    </td>
                  </tr>
                @endforeach
              </tbody>
            </table>
        </div>
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

For more details about Bootbox visit their documentation.

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/integrate-bootbox-alert-confirmation-with-ajax-in-laravel-8 if you want to download this code.

Happy coding :)

Image of Datadog

Create and maintain end-to-end frontend tests

Learn best practices on creating frontend tests, testing on-premise apps, integrating tests into your CI/CD pipeline, and using Datadog’s testing tunnel.

Download The Guide

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more