Laravel Sweet Alert Confirm Delete Example

By Sumeet Shroff
Last Updated On : February 10, 2023
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)-&gt;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.

Categories

Latest Blogs

Ready to Amplify Your Services with our Premium White Label Web Design

Are you looking to expand your service offerings without the overhead of an in-house design team? Our white label web design services are the perfect solution. We provide top-notch, fully customizable web designs that seamlessly blend with your brand, allowing you to offer additional value to your clients.
Contact Us Today to Start Partnering with Our White Label Web Design Experts!
© 2024 · Prateeksha Web Design. Built with Gatsby All rights reserved | Privacy Policy
Designed by Prateeksha Web