A
A
Alexander Bondarenko2020-07-09 13:27:24
Django
Alexander Bondarenko, 2020-07-09 13:27:24

How to regenerate part of a page with Django?

I'm trying to add a product to the cart via ajax, without refreshing the page, using the forum, it worked, but I can't figure out how to update the data in the modal cart, I just tried to insert the code again, but it is not generated by django, How can I make django regenerate part of the page , or how can I get data via ajax and insert it into the right blocks?

$( ".add_to_cart" ).submit(function(e,addr) {
        e.preventDefault();
        var quantity = $(this).find('select option:selected').val();
        console.log(quantity);
        $.ajax({
        type: "POST",
        url: String($('.add_to_cart').data("action")),
        data: {csrfmiddlewaretoken: csrftoken, quantity: quantity
            },
        success: function() {
            $('.main-offer_list').html(`{% for item in cart %}
        {% with product=item.product %}
        <div class="main-offer_list-item">
            <div class="main-offer_list-info">
                <div class="main-offer_list-title">
                    {{ product.name }}
                </div>
                <div class="main-offer_list-calc">
                    {{ item.quantity }}
                </div>
            </div>
            <img src="{{ product.image.url }}" alt="">
            <div class="main-offer_list-close">
                <a class="delete-btn" data-delete="{% url 'cart:cart_remove' product.id %}"><img class="img-svg" src="{% static 'img/close.svg' %}" alt=""></a>
            </div>
        </div>
        {% endwith %}
        {% endfor %}`);
        } 
      });
});

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry, 2020-07-09
@bond_1013

Alexander Bondarenko everything is quite simple.
1. You must create a template - a block that you will insert on the cart rendering page through a tag, {% include 'blocks/cart_items.html' %}for example.
2. Create a view that will render the template only blocks/cart_items.html and pass cart data to it. In fact, everything that you have in $('.main-offer_list').html( needs to be separated into a separate template file.
3. Paste the resulting code in the right place.

<div class="cart-wrap">
    {% include 'blocks/cart_items.html' %}
</div>

$('.cart-wrap').html( 'тут дата которая пришла с сервера' );

The advantage of this approach is that you use the same template, and in order to change it you don’t have to edit js, it’s enough to correct it in 1 place, that is, the template itself that is added to the basket

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question