Je veux supprimer ce produit instantanément lorsque je clique sur le bouton Supprimer, jusqu'à présent, lorsque je clique sur le bouton Supprimer, il masque l'icône et le produit reste affiché jusqu'à ce que je rafraîchisse la page, puis le produit a disparu, comment puis-je résoudre ce problème?

Scénario

   function deleteFromFavourites(productid, userid) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        method: 'post',
        url: `product/${productid}/unlike`,
        data: {
            'user_id': userid,
            'product_id': productid,
        },
        success: function () {

    console.log($('#deletefavourite' + productid));
            // show delete button
            $('#deletefavourite' + productid).hide();
        },
    });
    }

Fichier de lame

@foreach (Auth::user()->likedProducts as $product)
 <h4>USD {{$product->price }}</h4>
 <h1>USD {{$product->name }}</h1>

   <a style="display: {{$product->isLiked ? "" : "none"}}" id="deletefavourite{{$product->id}}" onClick="deleteFromFavourites({{$product->id}}, {{ Auth::user() ? Auth::user()->id : 0 }})">Delete</a>

@endforeach
0
joh 5 nov. 2019 à 05:08

1 réponse

Meilleure réponse

Vous devez modifier la div parent du produit que vous souhaitez masquer au lieu de masquer la balise " a ".

function deleteFromFavourites(this, productid, userid) {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    $.ajax({
        method: 'post',
        url: `product/${productid}/unlike`,
        data: {
            'user_id': userid,
            'product_id': productid,
        },
        success: function () {
            // remove parent division on success
            this.parent().remove();
        },
    });
}

dans votre lame, enveloppez le produit en div.

@foreach (Auth::user()->likedProducts as $product)
 <div id="parentDiv">
   <h4>USD {{$product->price }}</h4>
   <h1>USD {{$product->name }}</h1>
   <a style="display: {{$product->isLiked ? "" : "none"}}" id="deletefavourite" data-user_id="{{ Auth::user() ? Auth::user()->id : 0 }}" data-product_id="{{$product->id}}">Delete</a>
 </div>
@endforeach

Une autre solution consiste à supprimer le onclick et à ajouter la fonction onclick à votre js.

$('#deletefovourite').click(function(){
   deleteFromFavourites($(this), $(this).data('product_id'),$(this).data('user_id'));
})
3
Poldo 5 nov. 2019 à 02:55