Laravel Sweet Alert Confirm Delete Example

Laravel Sweet Alert Confirm Delete Example Laravel is a powerful PHP framework for web application development. One of the important features of a web application is to have a user-friendly and interactive user interface. SweetAlert is a JavaScript library that provides a more modern, customizable, and attractive alternative to the default JavaScript alert box. In this article, we will show you how to use SweetAlert in Laravel to confirm delete actions. With SweetAlert, we can display a confirm dialog box with a custom message and options to either cancel or confirm the action.

Step 1: Install SweetAlert Library

The first step is to install the SweetAlert library. You can download it from the official website or use a CDN link. To use a CDN link, simply add the following code to your HTML file:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.css"> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.min.js"></script>

Step 2: Add Delete Button

Next, we need to add a delete button to our view file. This can be a simple HTML button with a class name that we can use to trigger the SweetAlert confirm dialog.

<button data->Delete</button>

Step 3: Add JavaScript Code

Now, we need to write JavaScript code to display the SweetAlert confirm dialog when the delete button is clicked.

    <script>
        $(document).ready(function() {
            $('.delete-record').click(function() {
                var id = $(this).data('id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.value) {
                        // Delete Record
                    }
                })
            });
        });
    </script>

In the code above, we are using the $('.delete-record') selector to bind a click event to the delete button. When the button is clicked, it will display a SweetAlert confirm dialog with the specified options. If the user clicks the "Yes, delete it!" button, the code inside the if (result.value) block will be executed.

Step 4: Add Route and Controller Method

Finally, we need to add a route and controller method to handle the delete action. In this example, we will use a simple AJAX request to delete the record from the database.

Route::delete('records/{id}', 'RecordController@destroy');

public function destroy($id) 
{ 
   Record::findOrFail($id)->delete(); 
   return response()->json(['success' => 'Record deleted successfully.']); 
}

In the controller method above, we are using the Record::findOrFail($id)->delete() method to delete the record from the database. If the record is successfully deleted, we return a JSON response with a success message.

Step 5: Add AJAX Code

Now, we need to add the AJAX code to make the delete request to the server.

<script>
        $(document).ready(function() {
            $('.delete-record').click(function() {
                var id = $(this).data('id');
                Swal.fire({
                    title: 'Are you sure?',
                    text: "You won't be able to revert this!",
                    icon: 'warning',
                    showCancelButton: true,
                    confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
                    confirmButtonText: 'Yes, delete it!'
                }).then((result) => {
                    if (result.value) {
                        $.ajax({
                            url: "records/" + id,
                            type: 'DELETE',
                            data: {
                                "_token": "{{ csrf_token() }}"
                            },
                            success: function(data) {
                                if (data.success) {
                                    Swal.fire(
                                        'Deleted!',
                                        data.success,
                                        'success'
                                    );
                                    location.reload();
                                }
                            }
                        });
                    }
                })
            });
        });
    </script>

In the code above, we are using the $.ajax() method to make a DELETE request to the server. We are sending the CSRF token along with the request for security purposes. If the request is successful, we display a success message using the SweetAlert library and reload the page.

Conclusion

In this article, we have shown you how to use SweetAlert in Laravel to confirm delete actions. With this technique, you can add a more user-friendly and interactive confirm dialog box to your web applications. You can further customize the SweetAlert library to match your application's design and requirements.