Laravel-“收藏夹"/“收藏夹"按钮 [英] 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

我的Javascript函数，用于使用AJAX请求添加/删除收藏夹项:

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?

推荐答案

PHP是服务器端代码，因此在离开服务器之前已完全呈现.这意味着客户端计算机上永远不会存在其他按钮.

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.

您可以改为允许将两个按钮都发送到客户端，但最初会使用CSS在视图中隐藏一个按钮.

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

然后在JavaScript中，您可以在进行更改时显示或隐藏按钮.

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();

            // ...

这篇关于Laravel-“收藏夹"/“收藏夹"按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！