モーダルフォームを動的に設定する

Question

データベースのアイテムのリストを表示するdjangoテンプレートがあります。私は、クリックすると各項目を編集または更新するつもりです。 更新したいアイテムを印刷できましたが、問題があります。 問題は、アイテムがモーダルフォームに入力されていないことです。

ここにコードがあります。

{% block body_block %} 
{% if items %} 
        {% for product in items %} 
        <tr align="center"> 
         <td>{{product.docfile}}</td> 
         <td>{{product.description}}</td> 
         <td >{{product.price}}</td> 
         <td >{{product.quantity}}</td> 
         <td> 
          <a href="#{{product.pk}}" class="manipulate btn btn-info btn-lg" item_id="{{product.pk}}">Update</a> 
         </td> 
        </tr> 
        <input type="hidden" id="ds" value="{{product.description}}"> 
        {% endfor %} 
       {% else %} 
        <p>You have <strong>no items</strong> currently in your cart! <strong>Add items now!</strong> 
        </p> 
       {% endif %} 
      </table> 
      <br><br><br> 

     <!-- Modal --> 
     <div class="modal fade" id="edititemModal{{product.pk}}" role="dialog" style="height: auto;"> 
      <div class="modal-dialog"> 
      <!-- Modal content--> 
       <div class="modal-content" align="left" > 
        <div class="modal-header"> 
         <button type="button" class="close" data-dismiss="modal">&times;</button> 
          <h4 class="modal-title">Edit or Update Item </h4> 
          <!-- <p>{{product.id}}</p> --> 
        </div> 
        <div class="modal-body"> 
         <div class="alert hidden" id="alert1" role="alert"> 
         </div> 
         <p id="item_make"></p> 
         <form action="/selly/edit_item/" method="post" class="special" enctype="multipart/form-data" item_id="{{product.pk}}"> 
          {% csrf_token %} 
           <div class="form-group"> 
            <input type="hidden" id="id_item" maxlength="32" name = "item_id" value="{{product.id}}" required/> 
           </div> 

           <div class="form-group"> 
            <label>Description</label> 
            <input type="text" id="id_description" maxlength="32" name = "description" value="{{product.description}}" class="form-control" required/> 
           </div> 

           <div class="form-group"> 
            <label>Price</label> 
            <input type="number" id="id_price" maxlength="32" name="price" value="{{product.price}}" class="form-control" required/> 
           </div> 

           <div class="form-group"> 
            <label>Quantity</label> 
            <input type="number" id="id_quantity" maxlength="10" name="quantity" value="{{product.quantity}}" class="form-control" required/> 
           </div> 
           <div class="modal-footer"> 
            <input type="submit" name="edit" id="edit_item" class='btn pull-right' value="Update"/> 
           </div> 

         </form><br> 
        </div> 
       </div> 
      </div> 
     </div> 
    <script> 
     $(document).ready(function(){ 
      $(".manipulate").click(function(){ 
       $('#id_description').val(); 
       var item_keys = ['#id_description', '#id_price', '#id_quantity'] 
       for(var i=2; i<5; i++){ 
        var item_val = $(this).parent().parent().find('td:nth-child('+i+')')[0].innerText; 
        console.log("InnerText is :"+ item_val); 
        $(item_keys[i-1]).val(item_val); 
       } 
       $('#id_item').val($(this).attr('item_id')); 
       $('#edititemModal').modal('show'); 
      }); 
     }); 
    </script> 
    {% endblock %} 

jqueryの最後で何をしていないのですか？

Answer 1

フォームオブジェクトを作成しているときは、最初の引数を追加してください。ここにドキュメントのリンクがあります。https://docs.djangoproject.com/en/1.9/ref/forms/api/#dynamic-initial-values