CODEWITHSUNDEEP
javascriptphpajaxlaravellaravel-5
joh
joh

Reputation: 238

Ajax the button is not changing until refreshing page

If I click the like or unlike button it sends the data and works as expected but the problem is it doesn't change the button instantly when you click until I refresh the page. eg. when I click like button it should change to unlike, I don't see errors in console, I have seen some questions similar to this but they haven't solved my problem. Any help would be appreciated.

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

Upvotes: 0

Views: 56

Answers (1)

skm
skm

Reputation: 1650

First you should update the button in your success function of the ajax call Since the condition is written in blade template, it will not trigger until you refresh the page so in order to change the button write the code in success function.

Try changing your code to something like this

<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>

And then inside your success function do following

After liking do 

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

After unliking call 

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

Not tested this is just an idea for you.

Upvotes: 3

Related Questions