Problem when displaying forms in tables
Issue #11
new
I am trying to display my formset in a table row per form and I believe I am putting the tags in the correct place. However the 'data-formset-body' tag gets moved out of the table in the generated fragment. This results in new forms adding outside the table.
My template looks like this:
<div id="formset" data-formset-prefix="{{ lineitem_formset.prefix }}">
{{ lineitem_formset.management_form }}
<b>ME</b>
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<div data-formset-body>
{% for li_form in lineitem_formset %}
{% include "shipments/shipment_entry_lineitem_empty.html" with form=li_form only %}
{% endfor %}
</div>
</tbody>
</table>
This fragment is from the initial load, but this seems to be where the problem begins:
<div id="formset" data-formset-prefix="lineitems">
<input id="id_lineitems-TOTAL_FORMS" name="lineitems-TOTAL_FORMS" type="hidden" value="1"><input id="id_lineitems-INITIAL_FORMS" name="lineitems-INITIAL_FORMS" type="hidden" value="1"><input id="id_lineitems-MIN_NUM_FORMS" name="lineitems-MIN_NUM_FORMS" type="hidden" value="0"><input id="id_lineitems-MAX_NUM_FORMS" name="lineitems-MAX_NUM_FORMS" type="hidden" value="1000">
<b>ME</b>
<div data-formset-body="">
<!-- Formset template -->
<div data-formset-form="" style="display: block;">
</div></div><table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
<td><input id="id_lineitems-0-product" name="lineitems-0-product" type="text" value="00003-0269-23"></td>
<td><input id="id_lineitems-0-quantity" name="lineitems-0-quantity" step="0.01" type="number" value="50.00"></td>
<td><input id="id_lineitems-0-id" name="lineitems-0-id" type="hidden" value="40"></td>
<td><input id="id_lineitems-0-DELETE" name="lineitems-0-DELETE" type="checkbox">
<button type="button" data-formset-delete-button="">Delete</button>
</td>
</tr>
</tbody>
</table>
<!-- Add a new form -->
<input type="button" value="Add another" data-formset-add="">
<script type="form-template" data-formset-empty-form="">
<!-- Formset template -->
<div data-formset-form>
<tr>
<td>
</td>
<td><input id="id_lineitems-__prefix__-product" name="lineitems-__prefix__-product" type="text" /></td>
<td><input id="id_lineitems-__prefix__-quantity" name="lineitems-__prefix__-quantity" step="0.01" type="number" /></td>
<td><input id="id_lineitems-__prefix__-id" name="lineitems-__prefix__-id" type="hidden" /></td>
<td><input id="id_lineitems-__prefix__-DELETE" name="lineitems-__prefix__-DELETE" type="checkbox" />
<button type="button" data-formset-delete-button>Delete</button>
</td>
</tr>
</div>
</script>
<script>jQuery(function ($) {
$("#formset").formset({animateForms: true}).on('formDeleted', function () {
console.log("Form deleted", this, arguments);
}).on('formAdded', function () {
console.log("Form added", this, arguments);
});
});</script>
</div>