Helps create formsets with a variable number of form elements
Formsets in Django are annoying because having a variable number of models in the form requires updating a manager form and some fancy javascript. This plugin takes care of everything for you!
Include script after the jQuery library (unless you are packaging scripts somehow else):
<script src="/path/to/jquery.cookie.js"></script>
Do not include the script directly from GitHub (http://raw.github.com/...). GitHub is not a CDN.
An example initial html is shown
<div id="form-container">
<input name="form-TOTAL_FORMS" value="3" />
<input name="form-INITIAL_FORMS" value="2" />
<div class="song">
<label for="...">
<input id="id_form-0-name" name="form-0-name">
<input id="id_form-0-otherfield" name="form-0-otherfield">
<span class="remove"></span>
</div>
<div class="song">
<label for="...">
<input id="id_form-0-name" name="form-0-name">
<input id="id_form-0-otherfield" name="form-0-otherfield">
<span class="remove"></span>
</div>
<div class="song">
<label for="...">
<input id="id_form-0-name" name="form-0-name">
<input id="id_form-0-otherfield" name="form-0-otherfield">
<span class="remove"></span>
</div>
<div class="controls">
</div>
</div>
To use dynamicFormset for this formset, use
$("#form-container").dynamicFormset({
model: ".song",
addWrapper: ".controls",
addHtml: "<a class='btn btn-primary'>Add Song</a>",
removeWrapper: ".remove",
});
I.e. there is a form container, #form-container, and then model instances, .song The plugin will automatically handle adding and removing forms, adding a delete field when the remove button is clicked, and updating the manager form. Make sure the manager form is inside of the form-container.
All of the configuration options are shown below
prefix: "form", // The prefix for the formset
model: ".formset", // A selector for each of the top level model object
addWrapper: false, // A selector that serves as the wrapper around the add button for finer placement. If false, will append to the bottom of the form
addClass: "addbtn", // A class for the add button
addHtml: false,
removeWrapper: false, // A selector that serves as the wrapper around the add button for finer placement. If false, will append to the wrapper
removeClass: "removebtn", // A class for the remove button
removeHtml: false,
addAnimation: 'slideDown', // The animation to use when a new item is added
addAnimationTime: 300, // The amount of time the add animation should take
removeAnimation: 'slideUp', // The animation to use when an item is removed
removeAnimationTime: 300, // The amount of time the remove animation should take
I plan on maintaining this. Any questions please email baugarten@gmail.com