laravel 11 delete record using ajax

Charlotte

2 min read

·

27-02-2025

1

0

Share

Deleting records in your Laravel 11 application shouldn't interrupt the user flow. Using AJAX allows for seamless record removal without full page reloads. This article will guide you through building this functionality, improving your application's user experience.

Setting up the Route

First, we need a route in your routes/web.php file to handle the AJAX delete request. This route will call a controller method responsible for deleting the record.

Route::delete('/record/{id}', [App\Http\Controllers\RecordController::class, 'destroy']);

This route uses the delete verb and accepts an id parameter to identify the record to be deleted.

Creating the Controller Method

Next, create (or modify) the RecordController. Add a destroy method to handle the delete request.

<?php

namespace App\Http\Controllers;

use App\Models\Record; // Replace 'Record' with your model name
use Illuminate\Http\Request;

class RecordController extends Controller
{
    // ... other methods ...

    public function destroy(Request $request, $id)
    {
        $record = Record::findOrFail($id);
        $record->delete();

        return response()->json(['success' => true]);
    }
}

This method finds the record using the provided ID, deletes it, and returns a JSON response indicating success. Error handling (e.g., if the record isn't found) can be added for robustness. For example:

    public function destroy(Request $request, $id)
    {
        try {
            $record = Record::findOrFail($id);
            $record->delete();
            return response()->json(['success' => true]);
        } catch (\Exception $e) {
            return response()->json(['success' => false, 'message' => $e->getMessage()], 500);
        }
    }

Implementing the AJAX Call in your Blade Template

Now, let's add the AJAX call to your Blade template. This example assumes you have a table displaying your records. Each row will have a delete button triggering the AJAX request.

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($records as $record)
            <tr>
                <td>{{ $record->name }}</td>
                <td>
                    <button class="delete-button" data-id="{{ $record->id }}">Delete</button>
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $('.delete-button').click(function() {
            let id = $(this).data('id');
            $.ajax({
                url: '/record/' + id,
                type: 'DELETE',
                data: {
                    _token: '{{ csrf_token() }}' // Add CSRF token for security
                },
                success: function(response) {
                    if (response.success) {
                        alert('Record deleted successfully!');
                        // Remove the row from the table
                        $(`button[data-id="${id}"]`).closest('tr').remove();
                    } else {
                        alert('Error deleting record.');
                    }
                },
                error: function(error) {
                    console.error(error);
                    alert('An error occurred. Please try again later.');
                }
            });
        });
    });
</script>

This code uses jQuery to handle the click event on the delete button. It sends a DELETE request to the appropriate route, including the CSRF token for security. Upon successful deletion, it removes the corresponding row from the table. Error handling is included to manage potential issues. Remember to include the jQuery library in your project. You can use a CDN link or include it via your asset pipeline.

Remember to replace /record/{id} with your actual route and adjust selectors as needed to match your HTML structure. Consider using a more sophisticated method for removing the row, such as using a library like SweetAlert2 for confirmation dialogs before deletion, improving the user experience even further. Implementing client-side validation before the AJAX call would also enhance the user experience and prevent unnecessary server requests.

This comprehensive guide provides a solid foundation for implementing AJAX-based record deletion in your Laravel 11 applications. Remember to always prioritize security and user experience in your development process.