Table des matières

Laravel

Configuration pour utiliser Ajax

Afin de voir comment configurer Ajax, nous allons modifier la suppression des articles du blogue pour qu'elle soit en Ajax

Middleware pour filtrer les routes Ajax

On utilise un middleware qui va permettre de vérifier si la requête qui a été envoyé est en Ajax.

Les middleware se trouve dans le dossier app/Http/Middleware 

namespace App\Http\Middleware;

use Closure;

class Ajax
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request $request
     * @param  \Closure $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
                
        if ($request->ajax()) {
            return $next($request);
        }

        abort(404);
    }
}

Ici on vérifie si la requête est en Ajax. Si oui, on autorise la requête à continuer sa route ($next($request)), sinon on interrompt avec une erreur 404.

Ajout du middleware dans Kernel.php

on ajoute le nouveau middleware dans Kernel.php afin que Laravel puisse le charger. 

protected $routeMiddleware = [
    ...
    'signed' => \Illuminate\Routing\Middleware\ValidateSignature::class,
    'throttle' => \Illuminate\Routing\Middleware\ThrottleRequests::class,
    'verified' => \Illuminate\Auth\Middleware\EnsureEmailIsVerified::class,
    'ajax' => \App\Http\Middleware\Ajax::class,
];

Configuration du contrôleur

On ajoute le middleware Ajax pour la méthode destroy(). C'est à dire que cette méthode devra obligatoirement être appelée en Ajax. 

public function __construct(){
    $this->middleware('auth', ['except' => ['index','show']]);
    $this->middleware('ajax')->only('destroy');
}

On modifie la méthode destroy() afin qu'elle renvoi du JSON avec un code 200 si tout c'est bien passé, ou un code 404 si l'élément n'a pas pu être supprimé. 

public function destroy(Post $post)
{
    if ($post->delete()){
        return response()->json([
            'id' => $post->id
        ], 200);
    } else {
        return response()->json(['message' => 'Not Found!'], 404);
    }
}

Afin de pouvoir détecter que l'utilisateur a cliqué sur le bouton supprimé, on ajoute une Class form-delete au formulaire. 

public function destroy(Post $post)
@auth
<form action="{{ url('posts/'.$post->id) }}" method="POST" class="form-delete">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
...

Partie JavaScript

Création d'un nouveau fichier JS

Dans le dossier /resources/js/, créez un nouveau fichier script.js afin de mettre notre code à l’intérieur. 

/resources/js/script.js

Il faut maintenant “dire” à Laravel de charger notre nouveau fichier JavaScript. Ouvrir le fichier /resources/js/app.js et ajoutez la ligne require('./script'); 

require('./bootstrap');
require('./script');

Petit ajustement pour la vue qui affiche les articles

On va entourer chaque article d'une div avec un id afin pouvoir supprimer les articles de la page plus facilement. 

...
@foreach ($posts as $post)
    <div id="post-{{ $post->id }}">
        <h2>
            <a href="{{ url("/posts/{$post->id}") }}">{{ $post->title }}</a>
        </h2>
        <p>{{ $post->content }}</p>
        @foreach ($post->categories as $category)
            <li>{{ $category->name }}</li>
        @endforeach

    @include('inc.delete-button')
    @include('inc.edit-button')
    </div>
@endforeach
...

Code JavaScript

Dans le fichier script.js 

$(() => {
    $.ajaxSetup({
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
    })


    $('.form-delete').submit((e) => {
        e.preventDefault();
        let href = $(e.currentTarget).attr('action')
        if (confirm('Vraiment supprimer ?')){
            $.ajax({
                url: href,
                type: 'DELETE'
            })
            .done((data) => {
                document.getElementById("post-" + data.id).remove()
            })
            .fail(() => {
                alert("L'article n'a pas pu être supprimé")
            })
        }

    })
})