jquery - How to append successful AJAX response to Drop down values in Laravel?

Question

After a successful response, I want to update list item values without page reloading. Right now, I have to reload page for every successful response. But I want that it will automatically be updated after add/remove/update successful response.

Here is my list items which comes in foreach loop

<li class="woocommerce-mini-cart-item mini_cart_item clearfix  ">
<a href="#" onclick="removeCart({{ $cart->id }})"
    class="remove remove_from_cart_button" aria-label="Remove this item">
<span class="lnr lnr-cross-circle"></span>
</a>
<a href="{{ route('shop.view', [$cart->FoodItem->id]) }}"
    class="image-holder">
<img src=" {{ asset('/storage/items/food/' . $cart->FoodItem->image) }}"
    class="attachment-shop_thumbnail size-shop_thumbnail wp-post-image "
    alt="" height="40" width="40">
<span class="product-name">{{ $cart->FoodItem->name }}</span>
</a>
<span class="quantity">
<span class="woocommerce-Price-amount amount">
<span
    class="woocommerce-Price-currencySymbol">$</span>{{ $cart->price }}
{{-- <span
    class="data{{ $cart->id }}"></span>
--}}
</span>
<span class="qty{{ $cart->id }}">x{{ $cart->quantity }}</span>
{{-- <span class="data{{ $cart->id }}">
</span> --}}
</span>

Here is my ajax, I'm trying this way success: function(response) { if (response.status == true) {

                    $(".data").append(
                            "<li class='woocommerce-mini-cart-item mini_cart_item clearfix'>" +
                            "<a href='#'class='remove remove_from_cart_button' aria-label='Remove this item'><span class='lnr lnr-cross-circle'></span></a>" +
                            "<a href='#' class='image-holder'><img src='/storage/items/food/" +
                            response.data.product_image +
                            "'class='attachment-shop_thumbnail size-shop_thumbnail wp-post-image'height='40' width='40'>" +
                            "<span class='product-name'>" + response.data.product_name +
                            "</span></a><span class='quantity'><span class='woocommerce-Price-amount amount'><span class='woocommerce-Price-currencySymbol'>" +
                            "$</span>" + response.data.price + "</span><span>x" + response.data
                            .quantity +
                            "</span></span></li>"
                        );

How to solved that issue?

question from:https://stackoverflow.com/questions/65914868/how-to-append-successful-ajax-response-to-drop-down-values-in-laravel

Answer 1

Waitting for answers