Django - 動的に要素を作成

Question

私はDjangoで完全な管理者と請求書アプリを作っています。

請求書アプリの場合、ユーザーが[販売伝票の登録]をクリックすると、請求書画面が表示されます。

今、この画面が表示されたらすぐにシステムに新しい請求書を動的に生成させ、保存しないようにします。ユーザーがアイテムの入力を開始すると、新しいアイテムの詳細が必要となります（つまり、各請求書にアイテムのリスト、その数量と価格があるアイテムの詳細が1つあります）。

ただし、ユーザーが請求書作成ボタンをクリックしない限り、いずれも保存されません。

私はこのことを行う方法を助ける必要があります。すなわち、ユーザーが請求書を作成し、これらの2つを外部キーとリンクする際に請求書と明細の詳細を作成する必要がありますが、 「保存」ボタンをクリックすると終了します。

編集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 
     }, 


     }); 
    }()); 

}); 

は同様に、製品IDを入力し、ユーザに製品のため、その他の詳細が自動生成されます。

：最後に

$("#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を使用する必要があります。また、フォームに情報をあらかじめ入力する必要がある場合は、コンテキストデータを使用することもできます。

もう1つの方法は、オブジェクトを作成し、ユーザーの試行を覚えている場合（時には役立つものもあれば）、単に取り除く場合に「CANCELLED」とフラグを立てることです（非常に一般的な状況開始された請求書を記入しない）。