Блог

Главная - Вопросы по программированию - Живая вставка Django без обновления страницы

Живая вставка Django без обновления страницы

#python #html #django #ajax

#python #HTML #django #ajax

Вопрос:

У меня есть это на моей домашней странице

введите описание изображения здесь

каждый раз, когда клиент нажимает Add to cart , он меняется на this, и данные будут вставлены в мою базу данных

введите описание изображения здесь

Я использую 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!');
                }
            });
            return false;
        });
    });
</script>

мой views.py

 def batchaddtocartHomepage(request):

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

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

это мой 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;">amp;#8369;amp;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 %}

мой скрипт

     <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>

ПРОБЛЕМА, с которой я столкнулся, кнопка меняется только при обновлении страницы.

это то, что я хочу сделать на своем собственном сайте https://www.landers.ph / (пожалуйста, попробуйте нажать кнопку landers.ph сайт) я надеюсь, что это даст вам представление о том, какую функциональность я хочу.

ОБНОВЛЕНИЕ я удаляю script и добавляю к некоторому коду в моем 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>

моя проблема в том, что когда я нажимаю на Большое яйцо (1 лоток) Add to cart , что меняется, это кнопка спелой папайи Соло (1 шт.)

Комментарии:

1. Вы имеете в виду remove кнопку? где эта кнопка? я не вижу эту кнопку в вашем коде.

2. удалить, когда пользователь нажимает на Add to cart я использовал input type submit

3. Итак, вам нужно изменить эту кнопку, чтобы удалить кнопку? Но ваш js-код предназначен для скрытия этой кнопки? Кроме того, пожалуйста, подробнее о проблеме, с которой вы столкнулись. Я видел ваш веб-сайт, о котором вы говорили, после обновления отображается эта remove кнопка.. но я не вижу никакой кнопки после обновления, и под продуктом отображается только количество div.

4. если пользователь нажмет <input type="submit" value="Add to cart" id="btn" onclick="myFunction()" class="btn btn-default add-to-cart"> , он изменится на quantity /-

5. я просто хочу, чтобы функциональность landers.ph на мой сайт

Ответ №1:

Вам нужно написать свой скрытый код внутри функции успеха ajax.Кроме того, используйте class selector вместо id .Итак, поскольку у вас уже есть that переменная, которая ссылается на current form , а кнопка и количество div находятся внутри формы, которую вы можете использовать that.find(".add-to-cart").hide(); и that.find(".qty").show(); для скрытия и отображения ваших элементов.

Демонстрационный код :

 $(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;">amp;#8369;amp;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;">amp;#8369;amp;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;">amp;#8369;amp;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>