Package: django-formset-js-improved
This is a fork of django-formset-js that adds support for reordering and nested formsets.The fork was done because the original author (Tim Heap) did not get around merging my PRs and I
need this to be on PyPI so I can depend on it. Please don’t expect this fork to be permanently
maintained.A wrapper for a JavaScript formset helper.InstallingInstall via pip:pip install django-formset-js-improvedThen add it and its dependancydjango-jquery-jsto yourINSTALLED_APPS:INSTALLED_APPS+=('django.contrib.staticfiles','jquery','djangoformsetjs',)UsingInclude the JavaScript libraryBoth jQuery and this library must be included in your page.
The simplest way to do this is to add the scripts as media dependencies on your form:fromdjangoformsetjs.utilsimportformset_media_jsclassMyForm(forms.Form):classMedia(object):js=formset_media_js+(# Other form media here)MyFormSet=formset_factory(MyForm)And then include the Media of the form in your template:{{formset.media}}Alternatively, simply add the script tags:<scriptsrc="{{STATIC_URL}}js/jquery.js"></script><scriptsrc="{{STATIC_URL}}js/jquery.formset.js"></script>Render the formsetSo that the library can work with your formset,
certain blocks of your formset need to be marked up withdata-formset-...attributes:{%loadformset_tags%}<divid="formset"data-formset-prefix="{{formset.prefix}}">{{formset.management_form}}<divdata-formset-body><!-- New forms will be inserted in here -->{%forforminformset%}<divdata-formset-form>{{form}}<buttontype="button"data-formset-move-up-button>Move up</button><buttontype="button"data-formset-move-down-button>Move down</button><buttontype="button"data-formset-delete-button>Delete form</button></div>{%endfor%}</div><!-- The empty form template. By wrapping this in a <script> tag, the
    __prefix__ placeholder can easily be replaced in both attributes and
    any scripts --><scripttype="form-template"data-formset-empty-form>{%escapescript%}<divdata-formset-form>{{formset.empty_form}}<buttontype="button"data-formset-move-up-button>Moveup</button><buttontype="button"data-formset-move-down-button>Movedown</button><buttontype="button"data-formset-delete-button>Deleteform</button></div>{%endescapescript%}</script><!-- This button will add a new form when clicked --><inputtype="button"value="Add another"data-formset-add><script>jQuery(function($){$("#formset").formset({animateForms:true,reorderMode:'dom',});});</script></div>Thedata-formset-data attributes are:data-formset-prefixThe value of{{ formset.prefix }}.
This is used to find the management form.data-formset-delete-confirm-textA question to ask the user to confirm a click on the delete button,
e.g. “Do you really want to delete this entry?”. Optional.data-formset-bodyThis indicates where all the child forms are.
New forms are inserted in here.data-formset-formEvery form (including the empty form) should have this attribute.data-formset-empty-formThe element that contains the empty form template.
For best results, use a<script>tag.data-formset-addA button that adds a new form.data-formset-delete-buttonA button that deletes that form.data-formset-move-up-buttonA button that moves that form one row up in a sortable formset.data-formset-move-down-buttonA button that moves that form one row down in a sortable formset.The empty form template is wrapped in a<script>as plain text.
This stops any JavaScript attached to widgets from running upon page load,
and makes finding and replacing the__prefix__placeholder easier.
The contents of the<script>should be wrapped in a{% escapescript %}block
to prevent any script tags inside from closing the wrapping script tag prematurely.When thedata-formset-addbutton is clicked, theformAddedevent is
fired on the form which was added. This event propagates upwards, and as such
can be handled from the form container.
For example, to select the new form added for form additions from the above
example, bind as such:$('#formset').on('formAdded',function(event){newForm=event.target;//Do Stuff});If the forms can be deleted, and contain a delete checkbox,
the following actions occur:When the checkbox is checked, marking the form for deletion,
theformDeletedevent is fired on thedata-formset-formcontainer,
and thedata-formset-form-deletedattribute is added.When the checkbox is unchecked, marking the form as active again,
theformAddedevent is fired on thedata-formset-formcontainer,
and thedata-formset-form-deletedattribute is removed.If the forms can be deleted, and contain a delete button,
pressing the delete button will toggle the delete checkbox for that form.
TheDELETEfield should be hidden if the delete button is used.
The delete button is identified by thedata-formset-delete-buttonattribute:{%forforminformset%}<divdata-formset-form>{{form.name}}{{form.age}}<divclass="hidden">{{form.DELETE}}</div><buttontype="button"data-formset-delete-button>Delete form</button></div>{%endfor%}If theanimateFormsoption is set when the formset is created,
adding and deleting forms will be animated by sliding the forms in and out.If the forms can be ordered and contain a order input field, it is expected
that the forms are in order on page loadIf the forms contain two ordering buttons, identified bydata-formset-move-up-buttonanddata-formset-move-down-button, those buttons modify the value in the
order input field by swapping it’s value with the closest lower or higher value.
In this case, theORDERfield should be hidden.If thereorderModeoption is set todom, the forms will change their places
in the DOM each time one of theORDERfields is being changed. If it is set toanimate, they will be sliding onto their new places.Attention: The animated
ordering feature has to make assumptions about your markup and CSS, e.g. that both your
formset container (data-formset-body) and your form (data-formset-form) aredivelements and can be toposition: relative/position: absolutefor the the time of
the animation without harm.This might not work for you out of the box.OptionsThe jQuery plugin takes the following options:form:The selector to find forms.
Defaults to[data-formset-form].emptyForm:The selector to find the empty form template.
Defaults toscript[type=form-template][data-formset-empty-form].body:The selector to find the formset body.
New forms will be inserted at the bottom of this element.
Defaults to[data-formset-body].add:The selector to find the add button.
Defaults to[data-formset-add].deleteButton:The selector to find the delete button within a form.
Defaults to[data-formset-delete-button].hasMaxFormsClass:The class added to the formset when the maximum number of forms is reached.
The maximum number of forms is pulled from the management form.
Defaults tohas-max-forms.animateForms:Whether to animate form addition/deletion.reorderMode:Can benone,domoranimate, see above for an explaination.
Defaults tonone.
Defaults tofalse.Javascript APIIf the bundled functionality is not for you,
you can interact with the formset using the JavaScript API.
All the behaviour is driven by aFormsetclass.
To get aFormsetfor an element, call:varformset=$('#my-form').formset('getOrCreate');This can be called multiple times on a single element,
and will always return the sameFormsetinstance.
All the methods and attributes listed below operate on aFormsetinstance.Formset.optsThe options used to create thisFormset.Formset.$formsetThe element theFormsetwas created for.Formset.$emptyFormThe empty form template used to create new forms.Formset.$bodyThe element where new forms are created.Formset.$addThe button used to add new forms.Formset.addForm()Add a form to theFormset.
If the maximum number of forms would be exceeded if another form was added,
an error will be thrown.Formset.$forms()Get a jQuery object of all the forms in theFormset.Formset.$managementForm(field)Get a jQuery object for the management form fieldfield:// Update the TOTAL_FORMS management form fieldthis.$managementForm('TOTAL_FORMS').val(10);Formset.totalFormCount()Count the total number of forms in theFormset, including deleted forms.Formset.activeFormCount()Count the total number of active (not deleted) forms in theFormset.Formset.deletedFormCount()Count the number of deleted forms in theFormset.Formset.hasMaxForms()Return true if theFormsethas its maximum number of forms.Formset.checkMaxForms()Check how many forms are in theFormset,
and set the relevant classes on theFormsetelement
if theFormsethas reached its limit.empty_prefix:The prefix placeholder your formset uses for the empty form. This is only
needed when you subclass FormSet to change this and defaults to__prefix__.ExampleA minimal example project is provided in theexample/directory.
Readexample/READMEfor more informationDevelopingWhen running./setup.py sdist, the JavaScript asset is minified using
UglifyJS if it is installed. To install UglifyJS, install node.js and npm, and
run:npm install uglifyjsYou can minify the scripts manually using:./setup.py minify