Laravel - Favourite / Un-Favourite button

问题

I'm trying to create a favourite / un-favourite button for items. The button needs to be toggable so that when the user first clicks it, the item is added to favourites, the next time they click it the item should be un-favourited. It should also remember all the items the user has already favourited and display the button differently.

Here is what I currently have, I loop through all the items and display the delete or add button depending if they have the item favourited:

 @foreach($items as $item)
    @if($item->isFavourited)
    <button id="deletefavourite{{$item->id}}" onClick="deleteFromFavourites({{$item->id}}, {{ Auth::user()->id }})" name="addfavourite" class="btn btn-lg"><i class="fas fa-heartbeat"></i></button>
    @else
    <button id="addfavourites{{$item->id}}" onClick="addToFavourites({{$item->id}}, {{ Auth::user()->id }})" name="deletefavourite" class="btn btn-lg"><i class="fas fa-heart" ></i></button>
    @endif
@endforeach

My Javascript function to add/remove favourite items using AJAX request:

   function addToFavourites(itemid, userid) {
        var user_id = userid;
        var item_id = itemid;

        $.ajax({
            type: 'post',
            url: 'api/addfavourite',
            data: {
                'user_id': user_id,
                'item_id': item_id,
            },
            success: function () {
                $('#addfavourites' + item_id).css({
                    'color': '#ad1707'
                });
            },
            error: function (XMLHttpRequest) {
                // handle error
            }
        });
    }

Function deleteFromFavourites is the same, but just doing a DELETE ajax 
request to remove the item

The problem is that the button does not toggle between favourite and un-favourite not unless I refresh the page. How can I do this without having to refresh the page?

回答1:

PHP is server side code, so it's completely rendered before it ever leaves the server. That means the other button never exists on the client machine.

You could instead allow both buttons to be sent to the client, but initially hide one from view with CSS.

@foreach($items as $item)

    <!-- set color and hide if not favourited -->
    <button id="deletefavourite{{$item->id}}" 
            onClick="deleteFromFavourites({{$item->id}}, {{ Auth::user()->id }})" 
            name="addfavourite" 
            class="btn btn-lg"
            style="color: #ad1707; {{ $item->isFavourited ? '' : 'display: none;' }}">
        <i class="fas fa-heartbeat"></i>
    </button>

    <!-- hide if favourited -->
    <button id="addfavourites{{$item->id}}" 
            onClick="addToFavourites({{$item->id}}, {{ Auth::user()->id }})" 
            name="deletefavourite" 
            class="btn btn-lg"
            style="{{ $item->isFavourited ? 'display: none;' : '' }}">
        <i class="fas fa-heart" ></i>
    </button>

@endforeach

Then in your JavaScript, you can show or hide the buttons as you make changes.

function addToFavourites(itemid, userid) {
    var user_id = userid;
    var item_id = itemid;

    $.ajax({
        type: 'post',
        url: 'api/addfavourite',
        data: {
            'user_id': user_id,
            'item_id': item_id,
        },
        success: function () {
            // hide add button
            $('#addfavourites' + item_id).hide();
            // show delete button
            $('#deletefavourite' + item_id).show();
        },
        error: function (XMLHttpRequest) {
            // handle error
        }
    });
}

// and so on for the other function


            // ...

            // show add button
            $('#addfavourites' + item_id).show();
            // hide delete button
            $('#deletefavourite' + item_id).hide();

            // ...

来源：https://stackoverflow.com/questions/57438613/laravel-favourite-un-favourite-button

标签

javascript

laravel

laravel-blade