Django formset.empty_forms добавляет формы динамически

Question

Я использую django-dynamic-formset для динамического добавления форм в набор форм.
Это работает отлично, если у меня есть extra=1 при создании набора форм.
Что я хотел бы сделать, хотя, есть Пока не показано ни одной формы, пока пользователь не нажмет кнопку «Добавить форму».
recommended solutionempty_forms, но по какой-то причине это не работает (не работает, что означает, что запись не сохраняется в БД). После рабочего кода, без использования empty_form:

<div id="coding"> 
<div id="coding-inner"> 
    <form action="" method="post" accept-charset="utf-8" id="form"> 
     {% csrf_token %} 
     {{ formset.management_form }} 
     {% for form in formset %} 
     <div class="form-container"> 
      <table border="0" cellspacing="5" cellpadding="5"> 
       <tr> 
        <td><label for="id_form-0-event_date">Event Date:</label></td> 
        <td>{{ form.event_date}}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-location">Location:</label></td> 
        <td><div class="location_wrapper">{{ form.location }}</div></td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-actors">Actors:</label></td> 
        <td>{{ form.actors }}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-num_participants">Number of Participants:</label></td> 
        <td>{{ form.num_participants }}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-issue">Issue:</label></td> 
        <td>{{ form.issue }}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-side">Side:</label></td> 
        <td>{{ form.side }}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-scope">Scope:</label></td> 
        <td>{{ form.scope }}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-part_violence">Participant Violence:</label></td> 
        <td>{{ form.part_violence}}</td> 
       </tr> 
       <tr> 
        <td><label for="id_form-0-sec_engagement">Security Forces Engagment:</label></td> 
        <td>{{ form.sec_engagement }}</td> 
       </tr> 
      </table> 
     </div> 
     {% endfor %} 
     <div id="form-nav"> 
      <div id="save-stay"> 
       <input type="submit" name="coding_form_save" value="Save"> 
      </div> 
      <div id="save-next"> 
       <input type="submit" name="coding_form_next" value="Save &#38; Next"> 
      </div> 

     </div> 
    </form> 

</div> 

<div id="pagination"> 
    <span class="step-links"> 
     {% if articles.has_previous %} 
     <a href="?page={{ articles.previous_page_number }}">previous</a> 
     {% endif %} 

     <span class="current"> 
      Article {{ articles.number }} of {{ articles.paginator.num_pages }}. 
     </span> 
     {% if articles.has_next %} 
     <a href="?page={{ articles.next_page_number }}">next</a> 
     {% endif %} 
    </span> 
</div> 


</div> 

</div> 

<script type="text/javascript"> 


      $(function() { 
       $('.form-container').formset({ 
        prefix: '{{ formset.prefix }}', 
        addText: 'add Event', 
        deleteText: 'delete Event' 
       }); 
      }) 
</script> 

И теперь код с помощью empty_form, который не работает. Единственная разница, что для кода с помощью empty_form, extra установлен на 0 вместо 1.

<div id="coding"> 
<div id="coding-inner"> 
    {% with formset.empty_form as form %} 
    <div id="form-container" style="display:none;"> 
     <table border="0" cellspacing="5" cellpadding="5"> 
      <tr> 
       <td><label for="id_form-0-event_date">Event Date:</label></td> 
       <td>{{ form.event_date}}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-location">Location:</label></td> 
       <td><div class="location_wrapper">{{ form.location }}</div></td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-actors">Actors:</label></td> 
       <td>{{ form.actors }}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-num_participants">Number of Participants:</label></td> 
       <td>{{ form.num_participants }}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-issue">Issue:</label></td> 
       <td>{{ form.issue }}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-side">Side:</label></td> 
       <td>{{ form.side }}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-scope">Scope:</label></td> 
       <td>{{ form.scope }}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-part_violence">Participant Violence:</label></td> 
       <td>{{ form.part_violence}}</td> 
      </tr> 
      <tr> 
       <td><label for="id_form-0-sec_engagement">Security Forces Engagment:</label></td> 
       <td>{{ form.sec_engagement }}</td> 
      </tr> 
     </table> 
    </div> 
    {% endwith %} 
    <form action="" method="post" accept-charset="utf-8" id="form"> 
     {% csrf_token %} 

     <div id="forms"> 

     </div> 
     {{ formset.management_form }} 
     <div id="form-nav"> 
      <div id="save-stay"> 
       <input type="submit" name="coding_form_save" value="Save"> 
      </div> 
      <div id="save-next"> 
       <input type="submit" name="coding_form_next" value="Save &#38; Next"> 
      </div> 
     </div> 

    </form> 

</div> 

<div id="pagination"> 
    <span class="step-links"> 
     {% if articles.has_previous %} 
     <a href="?page={{ articles.previous_page_number }}">previous</a> 
     {% endif %} 

     <span class="current"> 
      Article {{ articles.number }} of {{ articles.paginator.num_pages }}. 
     </span> 
     {% if articles.has_next %} 
     <a href="?page={{ articles.next_page_number }}">next</a> 
     {% endif %} 
    </span> 
</div> 
</div> 

<script type="text/javascript"> 
      $(function() { 
       $('#forms').formset({ 
        formTemplate: '#form-container', 
        prefix: '{{ formset.prefix }}', 
        addText: 'add Event', 
        deleteText: 'delete Event' 
       }); 
      }) 

</script> 

Что мне не хватает?

Answer 1

Вы можете использовать этот jquery plugin.