Ajax кнопка не меняется до обновления страницы

Question

Если я нажимаю кнопку «Нравится» или «Не нравится», она отправляет данные и работает, как и ожидалось, но проблема в том, что она не меняет кнопку сразу, когда вы нажимаете, пока я не обновлю страницу. например. когда я нажимаю кнопку «Мне нравится», она должна измениться на «Непохожая», в консоли я не вижу ошибок, я видел похожие вопросы, но они не решили мою проблему. Буду признателен за любую помощь.

Javascript

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

$.ajax({
    method: 'post',
    url: `/product/like/${productid}`,
    data: {
        'user_id': userid,
        'product_id': productid,
    },
    success: function () {
        // hide add button
console.log($('#addfavourites' + productid));
        $('#addfavourites' + productid).show();
        // show delete button
        $('#deletefavourite' + productid).show();
    },
    error: function (XMLHttpRequest) {
        // handle error
    }
});

}

   // Unlike product
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 () {
        // hide add button
console.log($('#addfavourites' + productid));
        $('#addfavourites' + productid).show();
        // show delete button
        $('#deletefavourite' + productid).show();
    },
    error: function (XMLHttpRequest) {
        // handle error
    }
});
}

Blade File

 @if($product->isLiked)
 <div id="deletefavourite{{$product->id}}"onClick="deleteFromFavourites({{$product->id}}, {{   Auth::user()->id }})"> unlike </div>
 @else
<div id="addfavourites{{$product->id}}" onClick="addToFavourites({{$product->id}}, {{ Auth::user()->id }})" > like </div>
@endif

Answer 1

Сначала вы должны обновить кнопку в вашей функции успеха вызова ajax. Так как условие записано в шаблоне блейда, оно не сработает, пока вы не обновите страницу, поэтому для изменения кнопки напишите код в функции успеха.

Попробуйте изменить свой код на что-то вроде этого

<div style="display: {{$product->isLiked ? "" : "none"}} id="deletefavourite{{$product->id}}"onClick="deleteFromFavourites({{$product->id}}, {{   Auth::user()->id }})"> unlike </div>
<div style=" display: {{!$product->isLiked ? "" : "none"}} id="addfavourites{{$product->id}}" onClick="addToFavourites({{$product->id}}, {{ Auth::user()->id }})" > like </div>

И затем в своей функции успеха выполните следующее:

После того, как любите, сделайте

$('#addfavourites'+productId).hide();
$('#deletefavourite'+productId).show();

После того, как не понравитсязвоните

$('#deletefavourite'+productId).hide();
$('#addfavourites'+productId).show();

Не проверено, это просто идея для вас.