Django live Insert without refreshing the page

Question

I have this in my Homepage

everytime the customer click the Add to cart it will change to this , and the data will Inserted in my database

I use AJAX to prevent the page to reload/refresh

<script type="text/javascript">
    $(document).ready(function(){
        $('#Insert_form').submit(function(){
            event.preventDefault();
            var that = $(this);

            $.ajax({
                url: "{% url 'batchaddtocartHomepage' %}",
                type: 'POST',
                data: that.serialize()
                ,success: function(data){
                    console.log('Success!');
                }
            });
            return false;
        });
    });
</script>

my views.py

def batchaddtocartHomepage(request):

    .....
    insert = CustomerPurchaseOrderDetail(
        ....
    )
    insert.save()

    data = {}
    data['success'] = True
    return HttpResponse(json.dumps(data), content_type="application/json")

this is my html

{% for product in bought_item %}
     <div class="col-sm-4">
          <div class="product-image-wrapper">
               <div class="single-products">
                     <div class="productinfo text-center">
                          <img src="{{product.image.url}}" style="width:250px;height:250px;" alt="" />
                           <form method="POST"  id="Insert_form"  enctype="multipart/form-data">{% csrf_token %}
                                <span style="text-decoration: line-through;">&#8369;&nbsp;{{product.price}}</span>
                                <h2><span >{{product.other_discount_price_formula|floatformat:'2'|intcomma}}</span></h2>
                               <div style="height: 65px;"><p>{{product.product}}</p></div>
                               <div id="qty" style="display:none;">
                               <div class="quantity buttons_added" style="width: 30%;">
                                   <input type="submit" value="-" class="minus" formaction="/updatecart_index/">
                                   <input type="number" step="1" min="1" max="99" name="quantity" value="1" title="Qty" class="divshow input-text qty text" size="4" pattern="" inputmode="">
                                   <input type="submit" value="+" class="plus" formaction="/updatecart_index/">
                                 </div>
                              </div>
                         <input type="submit"  value="Add to cart" id="btn" onclick="myFunction()" class="btn btn-default add-to-cart">
                                        </form>
                                    </div>
                                </div>
                                <div class="choose">
                                    <ul class="nav nav-pills nav-justified">
                                        <li><a href="{% url 'Vegetables' %}?id={{product.id}}"><i class="fa fa-plus-square"></i>View Product 1</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                        {% endfor %}

my script

    <script>
        function myFunction() {
          var x = document.getElementById("qty");
          var btn = document.getElementById("btn");
          if (x.style.display === "none") {
              x.style.display = "none";
          } else {
              x.style.display = "block";
          }
       }
    </script>

PROBLEM I encountered, the button only changes when I refresh the page.

this is my what i want to do in my own site https://www.landers.ph/ (please try to click the button of landers.ph site) i hope it will get you idea of what functionality i want.

UPDATE i remove the script and i add to some code in my ajax

<script type="text/javascript">
    $(document).ready(function(){
        $('#Insert_form').submit(function(){
            event.preventDefault();
            var that = $(this);
            $.ajax({
                url: "{% url 'batchaddtocartHomepage' %}",
                type: 'POST',
                data: that.serialize()
                ,success: function(data){
                    console.log('Success!');
                    var x = document.getElementById("qty");
                    var btn = document.getElementById("btn");
                    x.style.display = "block";
                    btn.style.display = "none";
                }
            });
            return false;
        });
    });
</script>

my problem is when i click the Egg Large (1 Tray) Add to cart what changes is the Papaya Solo Ripe (1 pc) button

Answer 1

You need to write your hiding code inside success function of ajax.Also, use class selector instead of id .So, as you already have that variable which is refer to current form and the button and quantity div is inside form you can use that.find(".add-to-cart").hide(); and that.find(".qty").show(); to hide and show your elements.

Demo Code :

 $(document).ready(function() { $('.Insert_form').submit(function() { event.preventDefault(); var that = $(this); /*$.ajax({ url: "{% url 'batchaddtocartHomepage' %}", type: 'POST', data: that.serialize(), success: function(data) {*/ that.find(".add-to-cart").hide(); //hide button that.find(".qty").show(); //show qty div /* } }); return false; });*/ }) });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-4"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="{{product.image.url}}" style="width:250px;height:250px;" alt="" /> <!--use class for form--> <form method="POST" class="Insert_form" enctype="multipart/form-data">{% csrf_token %} <span style="text-decoration: line-through;">&#8369;&nbsp;{{product.price}}</span> <h2><span>{{product.other_discount_price_formula|floatformat:'2'|intcomma}}</span></h2> <div style="height: 65px;"> <p>{{product.product}}</p> </div> <!--use class for qty--> <div class="qty" style="display:none;"> <div class="quantity buttons_added" style="width: 30%;"> <input type="submit" value="-" class="minus" formaction="/updatecart_index/"> <input type="number" step="1" min="1" max="99" name="quantity" value="1" title="Qty" class="divshow input-text qty text" size="4" pattern="" inputmode=""> <input type="submit" value="+" class="plus" formaction="/updatecart_index/"> </div> </div> <input type="submit" value="Add to cart" id="btn" class="btn btn-default add-to-cart"> </form> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="{% url 'Vegetables' %}?id={{product.id}}"><i class="fa fa-plus-square"></i>View Product 1</a></li> </ul> </div> </div> </div> <div class="col-sm-4"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="{{product.image.url}}" style="width:250px;height:250px;" alt="" /> <form method="POST" class="Insert_form" enctype="multipart/form-data">{% csrf_token %} <span style="text-decoration: line-through;">&#8369;&nbsp;{{product.price}}</span> <h2><span>{{product.other_discount_price_formula|floatformat:'2'|intcomma}}</span></h2> <div style="height: 65px;"> <p>{{product.product}}</p> </div> <div class="qty" style="display:none;"> <div class="quantity buttons_added" style="width: 30%;"> <input type="submit" value="-" class="minus" formaction="/updatecart_index/"> <input type="number" step="1" min="1" max="99" name="quantity" value="1" title="Qty" class="divshow input-text qty text" size="4" pattern="" inputmode=""> <input type="submit" value="+" class="plus" formaction="/updatecart_index/"> </div> </div> <input type="submit" value="Add to cart" id="btn" class="btn btn-default add-to-cart"> </form> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="{% url 'Vegetables' %}?id={{product.id}}"><i class="fa fa-plus-square"></i>View Product 1</a></li> </ul> </div> </div> </div> <div class="col-sm-4"> <div class="product-image-wrapper"> <div class="single-products"> <div class="productinfo text-center"> <img src="{{product.image.url}}" style="width:250px;height:250px;" alt="" /> <form method="POST" class="Insert_form" enctype="multipart/form-data">{% csrf_token %} <span style="text-decoration: line-through;">&#8369;&nbsp;{{product.price}}</span> <h2><span>{{product.other_discount_price_formula|floatformat:'2'|intcomma}}</span></h2> <div style="height: 65px;"> <p>{{product.product}}</p> </div> <div class="qty" style="display:none;"> <div class="quantity buttons_added" style="width: 30%;"> <input type="submit" value="-" class="minus" formaction="/updatecart_index/"> <input type="number" step="1" min="1" max="99" name="quantity" value="1" title="Qty" class="divshow input-text qty text" size="4" pattern="" inputmode=""> <input type="submit" value="+" class="plus" formaction="/updatecart_index/"> </div> </div> <input type="submit" value="Add to cart" id="btn" class="btn btn-default add-to-cart"> </form> </div> </div> <div class="choose"> <ul class="nav nav-pills nav-justified"> <li><a href="{% url 'Vegetables' %}?id={{product.id}}"><i class="fa fa-plus-square"></i>View Product 1</a></li> </ul> </div> </div> </div>