1
votes

Supprimer dans Laravel avec ajax

J'utilise Laravel et je souhaite supprimer l'enregistrement du panneau d'administration avec le bouton donc je veux utiliser Ajax pour ne pas actualiser la page lorsque je veux supprimer

donc le problème est le suivant
quand je clique sur le bouton, l'enregistrement va être supprimé mais la page ne montre aucun changement (je veux dire que l'enregistrement est supprimé mais il est toujours dans la page et quand j'actualise la page, il va se cacher et supprimer)

contrôleur :

Route::delete('/comment/delete/{id}', 'admin\CommentController@destroy')->name('comment.destroy');

vue :

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('comment.index.comments') }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
            {{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
            {{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
        </div>
        {{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
            {{--<i class="fa fa-calendar-o"></i>--}}
            {{--This week--}}
        {{--</button>--}}
        <span>
             <a href="#" class="btn  btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
             <a href="#"  class="btn  btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
        </span>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
        <tr>
            <th>{{ __('comment.index.id') }}</th>
            <th>{{ __('comment.index.user-id') }}</th>
            <th>{{ __('comment.index.parent-id') }}</th>
            <th>{{ __('comment.index.comment') }}</th>
            <th>{{ __('comment.index.commentable-id') }}</th>
            <th>{{ __('comment.index.commentable-type') }}</th>
            <th>{{ __('comment.index.status') }}</th>
            <th>{{ __('comment.index.data') }}</th>
            <th>{{ __('comment.index.setting') }}</th>
        </tr>
        </thead>
        <tbody>
        @foreach($comments as $comment)
            <tr>
                <td><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></td>
                <td>{{ $comment->user_id }}</td>
                <td>{{ $comment->parent_id }}</td>
                <td>{{ $comment->comment }}</td>
                <td>{{ $comment->commentable_id }}</td>
                <td>{{ $comment->commentable_type }}</td>
                <td>{{ $comment->status }}</td>
                <td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
                <td>
                    {{--<form action="{{ route('change.approved', $comment->id) }}" method="post">--}}
                        {{--@csrf--}}
                        {{--{{ method_field('put') }}--}}
                        {{--<input value="change approved {{ $comment->approved }}" type="submit" class="btn btn-sm btn-success">--}}
                    {{--</form>--}}
                    {{--<form action="{{ route('comment.destroy', $comment->id) }}" method="post">--}}
                        {{--@csrf--}}
                        {{--{{ method_field('delete') }}--}}
                        {{--<input value="delete" type="submit" class="btn btn-sm btn-danger">--}}
                    {{--</form>--}}



                    <form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
                        @csrf
                        {{ method_field('put') }}
                        {{--<input value="" >--}}
                        <button type="submit" class="btn btn-link"><i class="fa @if( $comment->approved == 1) fa-toggle-on text-success @else fa-toggle-off text-secondary @endif"></i> approved</button>
                    </form>

                    <hr class="p-0 m-1">
                    <button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>

                    @csrf
                        {{ method_field('delete') }}
                        {{--<input value="delete">--}}
                        <button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
                    </form>
                </td>
            </tr>
        @endforeach
        </tbody>
    </table>
</div>

<script>
    $(".deleteProduct").click(function() {
        var id = $(this).data("id");
        var token = $(this).data("token");
        $.ajax(
            {
                url: "comment/delete/"+id,
                type: 'DELETE',
                dataType: "JSON",
                data: {
                    "id": id,
                    "_method": 'DELETE',
                    "_token": token,
                },
                success: function ()
                {
                    console.log("it Work");
                }
            });

        console.log("It failed");
    });
</script>

et route :

 $comment = Comment::find($id); 
 $comment->delete($id);

Au fait, j'utilise AJAX à mon avis

php laravel jquery

0 commentaires

4 Réponses :

3
votes

Ajoutez un commentaire id dans la balise tr afin que chaque balise tr soit unique. En cas de succès d'ajax, supprimez cette ligne (tr) en utilisant le commentaire id .

<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">{{ __('comment.index.comments') }}</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group mr-2">
            {{--<a href="#" class="btn btn-sm btn-outline-success disabled">{{ __('comment.index.create') }}</a>--}}
            {{--<a href="#" class="btn btn-sm btn-outline-secondary">Export</a>--}}
        </div>
        {{--<button class="btn btn-sm btn-outline-secondary dropdown-toggle">--}}
            {{--<i class="fa fa-calendar-o"></i>--}}
            {{--This week--}}
        {{--</button>--}}
        <span>
             <a href="#" class="btn  btn-warning btn-sm">Excel <i class="fas fa-cloud-download-alt"></i></a>
             <a href="#"  class="btn  btn-info btn-sm">Create <i class="fas fa-plus-square"></i></a>
        </span>
    </div>
</div>

<div class="table-responsive">
    <table class="table table-striped table-sm">
        <thead>
          <tr>
              <th>{{ __('comment.index.id') }}</th>
              <th>{{ __('comment.index.user-id') }}</th>
              <th>{{ __('comment.index.parent-id') }}</th>
              <th>{{ __('comment.index.comment') }}</th>
              <th>{{ __('comment.index.commentable-id') }}</th>
              <th>{{ __('comment.index.commentable-type') }}</th>
              <th>{{ __('comment.index.status') }}</th>
              <th>{{ __('comment.index.data') }}</th>
              <th>{{ __('comment.index.setting') }}</th>
          </tr>
        </thead>

        <tbody>
          @foreach($comments as $comment)
            <tr id="{{ $comment->id }}">
                <td><a href="{{ route('comment.show', $comment->id) }}">{{ $comment->id }}</a></td>
                <td>{{ $comment->user_id }}</td>
                <td>{{ $comment->parent_id }}</td>
                <td>{{ $comment->comment }}</td>
                <td>{{ $comment->commentable_id }}</td>
                <td>{{ $comment->commentable_type }}</td>
                <td>{{ $comment->status }}</td>
                <td>{{ \Carbon\Carbon::parse($comment->created_at)->diffForHumans() }}</td>
                <td>

                    <form class="form-inline" action="{{ route('change.approved', $comment->id) }}" method="post">
                        @csrf
                        {{ method_field('put') }}

                        <button type="submit" class="btn btn-link"><i class="fa @if( $comment->approved == 1) fa-toggle-on text-success @else fa-toggle-off text-secondary @endif"></i> approved</button>
                    </form>

                    <hr class="p-0 m-1">
                    <button class="deleteProduct" data-id="{{ $comment->id }}" data-token="{{ csrf_token() }}" >Delete Task</button>

                    @csrf
                        {{ method_field('delete') }}
                        {{--<input value="delete">--}}
                        <button class="btn btn-sm btn-danger" type="submit"><i class="fa fa-trash"></i></button>
                    </form>
                </td>
            </tr>
          @endforeach
        </tbody>
    </table>
</div>

<script>
    $(".deleteProduct").click(function(){
        var id = $(this).data("id");
        var token = $(this).data("token");
        $.ajax(
            {
                url: "comment/delete/"+id,
                type: 'DELETE',
                dataType: "JSON",
                data: {
                    "id": id,
                    "_method": 'DELETE',
                    "_token": token,
                },
                success: function ()
                {
                    console.log("it Work");
                    $("tr#"+id).remove();
                }
            });

        console.log("It failed");
    });
</script>

2 commentaires

merci beaucoup cela fonctionne et j'utilise aussi return tous les commentaires dans le contrôleur comme ceci: $ comment = Comment :: find ($ id); $ comment-> supprimer ($ id); $ comments = Comment :: all (); return $ commentaires;

C'est super . :) Pas besoin de retourner tous les commentaires. Vous pouvez retourner 1 ou true et cela arrivera avec succès ajax et la fonctionnalité de suppression de ligne fonctionnera.

0
votes

Vous n'avez qu'à masquer cette ligne en cliquant dessus. certains aiment ça ...

 $(".deleteProduct").click(function(){
    $(this).closest("tr").hide();
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                console.log("it Work");
            }
        });

    console.log("It failed");
});

J'espère que cette aide .. Vous pouvez l'utiliser dans une réponse après réussite

0 commentaires

1
votes

Faites-le simplement.

<script>
 $(".deleteProduct").click(function(){
    var btn = $(this);
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                btn.closest("tr").remove(); // closest tr removed
                console.log("it Work");
            }
        });

    console.log("It failed");
});

0 commentaires

0
votes

vous devez modifier votre script

<script>
 $(".deleteProduct").click(function(){
    var id = $(this).data("id");
    var token = $(this).data("token");
    $.ajax(
        {
            url: "comment/delete/"+id,
            type: 'DELETE',
            dataType: "JSON",
            data: {
                "id": id,
                "_method": 'DELETE',
                "_token": token,
            },
            success: function ()
            {
                $(this).closest("tr").remove();
                alret('record deleted success fully');//or whatever type alert you want to show
            }
        });

    console.log("It failed");
});

0 commentaires