laravel 11 delete record using ajax

3 min read 28-02-2025

Deleting records in your Laravel 11 application shouldn't interrupt the user flow. AJAX provides a seamless way to remove data without requiring a full page reload. This article will guide you through the process, building a robust and user-friendly solution. We'll cover setting up routes, controllers, views, and the AJAX calls themselves.

Setting up the Laravel Environment

Before we begin, ensure you have a Laravel 11 application set up. If not, you can create one using Composer:

composer create-project --prefer-dist laravel/laravel laravel-ajax-delete
cd laravel-ajax-delete

We'll assume you have a basic model (e.g., Post) and associated controller (PostController) already created. If not, you can generate them using Artisan:

php artisan make:model Post -m
php artisan make:controller PostController

Remember to run migrations if you generated a model:

php artisan migrate

Defining the Route

First, define a route in your routes/web.php file to handle the AJAX delete request. This route will point to a method in your PostController. Let's create a route that accepts a POST request to delete a post:

Route::post('/posts/{post}/delete', [PostController::class, 'destroy'])->name('posts.destroy');

This route uses the post ID as a parameter, making it dynamic for deleting specific records. The name attribute helps make your routes easier to manage.

Implementing the Controller Method

Next, create the destroy method within your PostController:

<?php

namespace App\Http\Controllers;

use App\Models\Post;
use Illuminate\Http\Request;

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

    public function destroy(Request $request, Post $post)
    {
        $post->delete();

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

This method uses Laravel's Eloquent ORM to easily find and delete the Post record. Upon successful deletion, it returns a JSON response indicating success. Laravel's route model binding automatically fetches the Post based on the ID passed in the route.

Creating the AJAX Request

Now, let's add the AJAX functionality to your view. Assume you have a table displaying your posts, and you want to add a delete button next to each post. Here's an example using jQuery:

<table id="posts-table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        @foreach ($posts as $post)
            <tr>
                <td>{{ $post->title }}</td>
                <td>
                    <button class="delete-post" data-id="{{ $post->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-post').click(function() {
            let postId = $(this).data('id');
            let row = $(this).closest('tr');

            $.ajax({
                url: `/posts/${postId}/delete`,
                type: 'POST',
                data: {
                    _token: '{{ csrf_token() }}' // Include CSRF token for security
                },
                success: function(response) {
                    if (response.success) {
                        row.remove();  // Remove the row from the table
                        alert('Post deleted successfully!');
                    } else {
                        alert('Error deleting post.');
                    }
                },
                error: function(error) {
                    alert('An error occurred: ' + error.responseText);
                }
            });
        });
    });
</script>

This code iterates through your posts and adds a "Delete" button to each row. The data-id attribute stores the post ID. The jQuery code handles the click event, sending an AJAX POST request to the delete route. Crucially, it includes the CSRF token for security, preventing cross-site request forgery attacks.

Remember to include the jQuery library in your project. You can use a CDN link or install it via a package manager.

Enhancing User Experience

Consider adding visual feedback to the user. For instance, you could temporarily disable the button during the AJAX request or display a loading indicator. You could also use more sophisticated error handling, providing more specific messages to the user.

Conclusion

This comprehensive guide demonstrates how to effectively delete records in Laravel 11 using AJAX. By implementing this approach, you provide a smoother, more responsive user experience, enhancing the overall usability of your application. Remember to always prioritize security by including CSRF protection in your AJAX requests. This method allows for a cleaner, more modern approach to data manipulation within your Laravel application.