Django ajax update context

Question

i want to update my template context "threedobject" my view file

def threedProductCategory(request):
    id = request.GET['id']
    todos = mProduct.objects.filter(category_id_id=id).values()
    return JsonResponse({"threedobject" : list(todos)})

my ajax

function refresh(i){
    $.ajax({
        type:"GET",
        url: 'cpd/',
        data:{"id": i},
        success: function (result) {
            threedobject = result;

            $.each(result.threedobject, function(item){
                $(".carousel-indicators").append(item);
            });
        }
    });
}

i want to update my html context threedobject my html:

                        {% for item in  threedobject%}
                            {% if foorloop.index == 0 %}
                                <li data-target='#carousel-custom1' data-slide-to='0' class='active '>
                                    <img src='{{item.image_url.0}}' alt='' />
                                    <p class="product-name">{{ item.name.0 }}</p>
                                    <p class="producer-name">{{ item.user_id.0 }}</p>

                                    <div class="rating">
                                        <span class="fa fa-star checked"></span>
                                        <span class="fa fa-star checked"></span>
                                        <span class="fa fa-star checked"></span>
                                        <span class="fa fa-star"></span>
                                        <span class="fa fa-star"></span>

                                    </div>
                                </li>
                            {% endif %}
                            <li id="categoryItem"
                                onclick="
                                        document.getElementById('threedSelecteImg').src = '{{ item.image_url }}';
                                        document.getElementById('threedSelecteName').innerHTML ='{{ item.name }}';
                                        document.getElementById('threedSelecteProducer').innerHTML='{{ item.user_id.name }}';
                                        document.getElementById('threedSelecteDescription').innerHTML='{{ item.description }}';
                                        "
                                data-target='#carousel-custom1' data-slide-to='1' >
                                <img class="threedObjectsImg" src='{{item.image_url}}' alt='' />
                                <p id="threedObjectsName" class="product-name">{{ item.name }}</p>
                                <p id="threedObjectsProducer" class="producer-name">{{ item.user_id.name }}</p>
                                <div class="rating">
                                    <span class="fa fa-star checked"></span>
                                    <span class="fa fa-star checked"></span>
                                    <span class="fa fa-star checked"></span>
                                    <span class="fa fa-star"></span>
                                    <span class="fa fa-star"></span>

                                </div>
                            </li>
                        {% endfor %}

this ajax not change anythings, but this one change first image:

function refresh(i){
    $.ajax({
        type:"GET",
        url: 'cpd/',
        data:{"id": i},
        success: function (result) {
            threedobject = result;
            for (var m = 0; m< result.threedobject.length; m++){
                $('#threedObjectsImg').attr("src",result.threedobject[m]["image_url"]);

            }


        }
    });
}

i want to update my context to change my template after i pressed some button. in this website i have category to uptade model by category every button upload some model to view

Answer 1

You have to bring the element you want to update with the id not with the class name

//as an instance:

function refresh(i){
    $.ajax({
        type:"GET",
        url: 'cpd/',
        data:{"id": i},
        success: function (result) {
            threedobject = result;

            $.each(result.threedobject, function(item){
                $("#carousel-indicators-id").append(item);
            });
        }
    });
}