laravel 11 delete record using ajax

Breiz Heurope

2 min read

·

09-03-2025

1

0

Share

This article will guide you through deleting records in Laravel 11 using AJAX. We'll cover setting up routes, controllers, views, and the JavaScript needed for a seamless user experience. This method provides a cleaner, more responsive alternative to traditional form submissions.

Setting up the Route

First, define a route in your routes/web.php file to handle the AJAX delete request. This route will point to a controller method.

// routes/web.php
Route::delete('/records/{record}', [RecordController::class, 'destroy']); 

This route uses the delete verb and expects a record ID. Replace RecordController and destroy with your actual controller and method names. The {record} segment will dynamically pass the record's ID to your controller.

Creating the Controller Method

Next, create or modify your controller (e.g., app/Http/Controllers/RecordController.php) to include the destroy method. This method will handle the deletion logic.

<?php

namespace App\Http\Controllers;

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

class RecordController extends Controller
{
    public function destroy(Request $request, Record $record)
    {
        $record->delete();

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

This method uses Laravel's Eloquent ORM to delete the record. It then returns a JSON response indicating success. Error handling (e.g., checking for authorization) should be added for production applications.

Preparing the View (Blade Template)

Now, let's prepare your Blade template to trigger the AJAX request. This example uses a simple button to initiate the deletion. Remember to replace placeholders like {{ $record->id }} with your actual data.

<!-- resources/views/records/index.blade.php -->
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($records as $record)
            <tr>
                <td>{{ $record->name }}</td>
                <td>
                    <button class="delete-record" 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>
    $('.delete-record').click(function(e) {
        e.preventDefault();
        let id = $(this).data('id');
        $.ajax({
            url: '/records/' + id,
            type: 'DELETE',
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            success: function(response) {
                if (response.success) {
                    alert('Record deleted successfully!');
                    location.reload(); // Refresh the page after successful deletion
                }
            },
            error: function(error) {
                console.log(error);
                alert('Error deleting record!');
            }
        });
    });
</script>

Remember to include the CSRF token in your AJAX request header for security. The <meta> tag providing the token should be in your Blade layout.

Adding CSRF Protection

Ensure you have the following meta tag in your Blade layout (usually app.blade.php or similar):

<meta name="csrf-token" content="{{ csrf_token() }}">

Improving User Experience

This basic example can be enhanced significantly. Consider these improvements:

• Confirmation Modal: Instead of a simple alert, use a modal to confirm deletion, preventing accidental data loss.
• Error Handling: Provide more detailed error messages to the user, not just a generic "Error deleting record!". Log errors for debugging.
• Loading Indicator: Show a loading indicator while the AJAX request is in progress.
• SweetAlert2: Integrate a library like SweetAlert2 for more visually appealing alerts and modals.

This comprehensive guide shows you how to efficiently delete records in Laravel 11 using AJAX. Remember to adjust the code to match your specific model and application structure. Always prioritize user experience and robust error handling in production applications.