Django - элемент динамического создания

Question

Я делаю полное приложение admin и invoice в Django.

Для приложения счета-фактуры, когда пользователь нажимает кнопку «Создать счет-фактуру», появляется экран счета-фактуры.

Теперь я хочу, чтобы система динамически генерировала новый счет, как только этот экран появляется, но не сохраняется. Когда пользователь начинает вводить элемент, мне нужна новая деталь (т. Е. У каждого счета есть одна деталь, в которой есть список предметов, их количество и цена).

Однако ни один из них не должен быть сохранен, если пользователь не нажмет кнопку создания счета.

Мне нужна помощь в том, как это сделать, т. Е. Создать счет и деталь, поскольку пользователь переходит к созданию счета, связывает эти два с внешним ключом, но также имеет возможность отбрасывать их, если пользователь не выполняет в конце нажмите кнопку «Сохранить».

Edit 1

Мой инвойсирование HTML:

{% extends "base.html" %} 


{% block title %} 

{% load static from staticfiles %} 
<script src="{% static 'bill/script.js' %}"></script> 

<link rel="stylesheet" href="{% static 'bill/style.css' %}"> 

<title>Sales Invoice</title> 

{% endblock %} 



{% block content%} 
<invoice> 
<div id="invoice"> 
<invoiceheader> 
    <!-- 
    <h1>Invoice</h1> 
    <address> 
     <p>Jonathan Neal</p> 
     <p>101 E. Chapman Ave<br>Orange, CA 92866</p> 
     <p>(800) 555-1234</p> 
    </address> 
    <span><img alt="" src="logo.png"><input type="file" accept="image/*"></span> 
--> 
</invoiceheader> 
<invoicearticle> 
    <!--<h1>Recipient</h1>--> 
    <code> 
     <p>Customer code: 
      <input id="customer-code" ></input></p> 
    </code> 
    <address> 
     <p></p> 
     <p id="companyname">Some Company</p> 
     <p id = "companyaddress">c/o Some Guy</p> 
    </address> 
    <table class="meta"> 
     <tr> 
      <th><span>Invoice #</span></th> 
      <td><span>101138</span></td> 
     </tr> 
     <tr> 
      <th><span>Date</span></th> 
      <td><span></span></td> 
     </tr> 
     <tr> 
      <th><span>Amount Due</span></th> 
      <td><span id="prefix">Rs. </span><span>600.00</span></td> 
     </tr> 
    </table> 
    <table class="inventory" id="inventory_table"> 
     <thead> 
      <tr> 
       <th colspan="1"><span>Item Code</span></th> 
       <th colspan="2"><span>Item Name</span></th> 
       <th colspan="1"><span>Unit Rate</span></th> 
       <th colspan="1"><span>Discount 1</span></th> 
       <th colspan="1"><span>Quantity</span></th> 
       <th colspan="1"><span>Discount 2</span></th> 
       <th colspan="1"><span>Free Quantity</span></th> 
       <th colspan="1"><span>VAT Type</span></th> 
       <th colspan="1"><span>VAT</span></th> 
       <th colspan="1"><span>Net Rate</span></th> 
      </tr> 
     </thead> 
     <form> 
     <tbody> 
      <tr> 
       <td colspan="1"><a class="cut">-</a><span class="itemcode" contenteditable></span></td> 
       <td colspan="2"><span contenteditable></span></td> 
       <td colspan="1"><span contenteditable>150.00</span></td> 
       <td colspan="1"><span contenteditable></span></td> 
       <td colspan="1"><span contenteditable>4</span></td> 
       <td colspan="1"><span contenteditable></span></td> 
       <td colspan="1"><span contenteditable></span></td> 
       <td colspan="1"><span contenteditable></span></td> 
       <td colspan="1"><span contenteditable></span></td> 
       <td colspan="1"><span contenteditable></span></td> 
      </tr>   
     </tbody> 
     </form> 
    </table> 
    <a class="add">+</a> 
    <table class="balance"> 
     <tr> 
      <th><span>Total</span></th> 
      <td><span data-prefix></span><span>600.00</span></td> 
     </tr> 
     <tr> 
      <th><span>Amount Paid</span></th> 
      <td><span data-prefix></span><span>0.00</span></td> 
     </tr> 
     <tr> 
      <th><span>Balance Due</span></th> 
      <td><span data-prefix></span><span>600.00</span></td> 
     </tr> 
    </table> 
</article> 

</div> 
</invoice> 


<script type="text/javascript"> 
/* url_sellbill = '{% url "billbrain:sellbill" %}' */ 
    csrf_token='{{csrf_token}}' 

</script> 


{% endblock %} 

Мой родственный JQuery файл (только необходимая часть):

Создание таблицы:

function generateTableRow() { 
var emptyColumn = document.createElement('tr'); 



emptyColumn.innerHTML = '<td><a class="cut">-</a><span class="itemcode" contenteditable></span></td>' + 
    '<td colspan="2"><span contenteditable></span></td>' + 
    '<td><span contenteditable>100.00</span></td>' + 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>'+ 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>'+ 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>' + 
    '<td><span contenteditable></span></td>' ; 


return emptyColumn; 
} 

Добавление клиентов сведения о пользователе, входящем в клиент Код:

$("#customer-code").change(function() { 

/*alert("Handler for .change() called.");*/ 
var input = $("#customer-code").val(); 
(function() { 
    $.ajax({ 
     url : "", 
     type : "POST", 
     data : { customer_code: input, 
       datatype: 'customer', 
       'csrfmiddlewaretoken': csrf_token}, // data sent with the post request 
     dataType: 'json', 

       // handle a successful response 
     success : function(jsondata) { 
      $('#companyname').html(jsondata['name']) 
      $('#companyaddress').html(jsondata['address']) 
      console.log(jsondata); // log the returned json to the console 
      console.log("success"); // another sanity check 
     }, 


     }); 
    }()); 

}); 

Аналогично, для продуктов, на пользователей, входящих идентификатор продукта, другие детали автоматически генерируемый:

$("#inventory_table").on("focus", ".itemcode", function(){ 
    $(this).data("initialText", $(this).html()); 
    /*alert("On focus for table inventory called.");*/ 
    }); 

$("#inventory_table").on("blur", ".itemcode", function(){ 
/*alert("On blur for table inventory called.");*/ 
var input = $(this).html(); 

if ($(this).data("initialText") !== $(this).html()) { 

    var el = this; 
    /*valueis='Hi 5' 
    alert($(this).closest('tr').find('td:nth-child(4) span').html());*/ 
    (function() { 
     $.ajax({ 
      url : "", 
      type : "POST", 
      data : { item_code: input, 
        datatype: 'item', 
        'csrfmiddlewaretoken': csrf_token}, // data sent with the post request 
      dataType: 'json', 

       // handle a successful response 
      success : function(jsondata) { 
       $(el).closest('tr').find('td:nth-child(2) span').html(jsondata['name']) 
       $(el).closest('tr').find('td:nth-child(2) span').html(jsondata['name']) 
       $(el).closest('tr').find('td:nth-child(3) span').html(jsondata['sellingprice']) 

       console.log(jsondata); // log the returned json to the console 
       alert(jsondata['name']); 
       console.log("success"); // another sanity check 
      }, 

     }); 
    }()); 
    } 
}); 

Наконец, это соответствующая функция моего views.py файла:

def bill(request): 

if request.method == 'POST': 
    datatype = request.POST.get('datatype') 
    if (datatype == 'customer'): 
     customerkey = request.POST.get('customer_code') 
     response_data = {} 
     response_data['name'] = Customer.object.get(customer_key__iexact=customerkey).name 
     response_data['address'] = Customer.object.get(customer_key__iexact=customerkey).address 
     jsondata = json.dumps(response_data) 
     return HttpResponse(jsondata) 

    if (datatype == 'item'): 
     productkey = request.POST.get('item_code') 
     response_data = {} 
     response_data['name'] = Product.object.get(prodkey__iexact=productkey).name 
     response_data['sellingprice'] = float(Product.object.get(prodkey__iexact=productkey).selling_price) 
     #response_data['address'] = Product.object.get(prodkey__iexact=productkey).address 
     jsondata = json.dumps(response_data) 
     return HttpResponse(jsondata) 


return render(request, 'bill/invoicing.html') 

Answer 1

Вы должны использовать Model Forms для вывода пользователю формы для заполнения и создания объекта после отправки. Вы также можете использовать некоторые данные контекста, если вам нужно предварительно заполнить некоторые данные в форме.

Другой способ - просто создать объект и пометить его как «ОТМЕНА», если вы хотите запомнить некоторые попытки пользователя (что может быть полезно иногда) или просто удалить его (что может вызвать проблемы с производительностью, если это очень распространенная ситуация чтобы не заполнить начальный счет).