Невозможно сразу отобразить сообщение при добавлении в список желаний, нажав на кнопку списка желаний в карточке товара

это функция views.py для бэкенда

    from django.http import JsonResponse
    from django.views.decorators.csrf import csrf_exempt
    from django.contrib.auth.decorators import login_required
    from .models import Product, Wishlist

    @csrf_exempt
    @login_required
    def add_to_wishlist(request):
        product_id = request.GET.get('id')
        product = Product.objects.get(id=product_id)

        wishlist_count = Wishlist.objects.filter(product=product, user=request.user).count()

        if wishlist_count > 0:
            msg = "Product already exists in wishlist"
        else:
            Wishlist.objects.create(product=product, user=request.user)
            msg = "Product added to wishlist"

        wishlist_count = Wishlist.objects.filter(user=request.user).count()
        request.session['wishlist_count'] = wishlist_count

        return JsonResponse({"bool": wishlist_count > 0, 'totalwishlistitems': wishlist_count, 'msg':   msg})

это мой functions.js ajax вызов для отправки на бэкэнд

$(document).ready(function () {
    $(document).on('click', '.add-to-wishlist', function (event) {
        event.preventDefault();
        event.stopPropagation();

        console.log('Button clicked');

        let product_id = $(this).data("product-item");
        console.log("Product ID is", product_id);

        let this_val = $(this);

        $.ajax({
            url: "/add-to-wishlist",
            data: { "id": product_id },
            dataType: "json",
            beforeSend: function () {
                console.log('Before sending AJAX');
                this_val.css("color", "red");
            },
            success: function (response) {
                console.log('AJAX success', response);
                this_val.toggleClass("wishlist-added", response.bool);

                $(".wishlist-items-count").text(response.totalwishlistitems);

                if (response.msg) {
                    console.log('Message from server:', response.msg);

                    // Create the message element
                    const message = $('<div class="wishlist-message">' + response.msg + '</div>');
                    console.log('Message element created:', message);

                    // Append the message element to the page
                    $('body').append(message);
                    console.log('Message element appended to body');

                    // Show the message element
                    message.fadeIn();
                    console.log('Message element faded in');

                    // Hide the message element after 3 seconds
                    setTimeout(function () {
                        message.fadeOut(function () {
                            $(this).remove();
                            console.log('Message element removed');
                        });
                    }, 3000);
                } else {
                    console.log('No message received from server');
                }
            },
            error: function (xhr, status, error) {
                console.log('Error in AJAX request', error);
            }
        });
    });
});

это мой index.html тепловая кнопка для добавления в список желаний url

При использовании messages.success("Product has been added to wishlist") в Django сообщение об успехе добавляется в сессию и отображается при следующей загрузке страницы. Этот подход требует обновления страницы для появления сообщения, поэтому вы видите его только после перезагрузки страницы.

Вернуться на верх