{"id":13813172,"url":"https://github.com/pretix/django-formset-js","last_synced_at":"2025-04-10T03:52:33.588Z","repository":{"id":21441936,"uuid":"24760229","full_name":"pretix/django-formset-js","owner":"pretix","description":"Fork of the identically named pypi package but adding support for ordering formsets","archived":false,"fork":false,"pushed_at":"2022-10-20T07:47:02.000Z","size":52,"stargazers_count":80,"open_issues_count":2,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-04-10T03:52:26.768Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://bitbucket.org/raphaelm/django-formset-js","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pretix.png","metadata":{"files":{"readme":"README.rst","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-10-03T13:53:47.000Z","updated_at":"2024-11-22T15:43:44.000Z","dependencies_parsed_at":"2022-08-05T12:15:24.058Z","dependency_job_id":null,"html_url":"https://github.com/pretix/django-formset-js","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pretix%2Fdjango-formset-js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pretix%2Fdjango-formset-js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pretix%2Fdjango-formset-js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pretix%2Fdjango-formset-js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pretix","download_url":"https://codeload.github.com/pretix/django-formset-js/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248154998,"owners_count":21056542,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T04:01:05.843Z","updated_at":"2025-04-10T03:52:33.554Z","avatar_url":"https://github.com/pretix.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"==========================\ndjango-formset-js-improved\n==========================\n\n**This is a fork of django-formset-js that adds support for reordering and nested formsets.**\n\nThe fork was done because the original author (Tim Heap) did not get around merging my PRs and I \nneed this to be on PyPI so I can depend on it. Please don't expect this fork to be permanently\nmaintained.\n\nA wrapper for a JavaScript formset helper.\n\nInstalling\n----------\n\nInstall via pip::\n\n    pip install django-formset-js-improved\n\nThen add it and its dependancy ``django-jquery-js``\nto your ``INSTALLED_APPS``:\n\n.. code-block:: python\n\n    INSTALLED_APPS += (\n        'django.contrib.staticfiles',\n        'jquery',\n        'djangoformsetjs',\n    )\n\nUsing\n-----\n\nInclude the JavaScript library\n******************************\n\nBoth jQuery and this library must be included in your page.\nThe simplest way to do this is to add the scripts as media dependencies on your form:\n\n.. code-block:: python\n\n    from djangoformsetjs.utils import formset_media_js\n\n    class MyForm(forms.Form):\n        class Media(object):\n            js = formset_media_js + (\n                # Other form media here\n            )\n\n    MyFormSet = formset_factory(MyForm)\n\nAnd then include the Media of the form in your template:\n\n.. code-block:: html+django\n\n    {{ formset.media }}\n\nAlternatively, simply add the script tags:\n\n.. code-block:: html+django\n\n    \u003cscript src=\"{{ STATIC_URL }}js/jquery.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"{{ STATIC_URL }}js/jquery.formset.js\"\u003e\u003c/script\u003e\n\nRender the formset\n******************\n\nSo that the library can work with your formset,\ncertain blocks of your formset need to be marked up with ``data-formset-...`` attributes:\n\n.. code-block:: html+django\n\n    {% load formset_tags %}\n\n    \u003cdiv id=\"formset\" data-formset-prefix=\"{{ formset.prefix }}\"\u003e\n        {{ formset.management_form }}\n\n        \u003cdiv data-formset-body\u003e\n            \u003c!-- New forms will be inserted in here --\u003e\n            {% for form in formset %}\n                \u003cdiv data-formset-form\u003e\n                    {{ form }}\n                    \u003cbutton type=\"button\" data-formset-move-up-button\u003eMove up\u003c/button\u003e\n                    \u003cbutton type=\"button\" data-formset-move-down-button\u003eMove down\u003c/button\u003e\n                    \u003cbutton type=\"button\" data-formset-delete-button\u003eDelete form\u003c/button\u003e\n                \u003c/div\u003e\n            {% endfor %}\n        \u003c/div\u003e\n\n        \u003c!-- The empty form template. By wrapping this in a \u003cscript\u003e tag, the\n        __prefix__ placeholder can easily be replaced in both attributes and\n        any scripts --\u003e\n        \u003cscript type=\"form-template\" data-formset-empty-form\u003e\n            {% escapescript %}\n                \u003cdiv data-formset-form\u003e\n                    {{ formset.empty_form }}\n                    \u003cbutton type=\"button\" data-formset-move-up-button\u003eMove up\u003c/button\u003e\n                    \u003cbutton type=\"button\" data-formset-move-down-button\u003eMove down\u003c/button\u003e\n                    \u003cbutton type=\"button\" data-formset-delete-button\u003eDelete form\u003c/button\u003e\n                \u003c/div\u003e\n            {% endescapescript %}\n        \u003c/script\u003e\n\n        \u003c!-- This button will add a new form when clicked --\u003e\n        \u003cinput type=\"button\" value=\"Add another\" data-formset-add\u003e\n\n        \u003cscript\u003ejQuery(function($) {\n            $(\"#formset\").formset({\n                animateForms: true,\n                reorderMode: 'dom',\n            });\n        });\u003c/script\u003e\n\n    \u003c/div\u003e\n\nThe ``data-formset-`` data attributes are:\n\n``data-formset-prefix``\n  The value of ``{{ formset.prefix }}``.\n  This is used to find the management form.\n\n``data-formset-delete-confirm-text``\n  A question to ask the user to confirm a click on the delete button,\n  e.g. \"Do you really want to delete this entry?\". Optional.\n\n``data-formset-body``\n  This indicates where all the child forms are.\n  New forms are inserted in here.\n\n``data-formset-form``\n  Every form (including the empty form) should have this attribute.\n\n``data-formset-empty-form``\n  The element that contains the empty form template.\n  For best results, use a ``\u003cscript\u003e`` tag.\n\n``data-formset-add``\n  A button that adds a new form.\n\n``data-formset-delete-button``\n  A button that deletes that form.\n\n``data-formset-move-up-button``\n  A button that moves that form one row up in a sortable formset.\n\n``data-formset-move-down-button``\n  A button that moves that form one row down in a sortable formset.\n\nThe empty form template is wrapped in a ``\u003cscript\u003e`` as plain text.\nThis stops any JavaScript attached to widgets from running upon page load,\nand makes finding and replacing the ``__prefix__`` placeholder easier.\nThe contents of the ``\u003cscript\u003e`` should be wrapped in a ``{% escapescript %}`` block\nto prevent any script tags inside from closing the wrapping script tag prematurely.\n\nWhen the ``data-formset-add`` button is clicked, the ``formAdded`` event is\nfired on the form which was added. This event propagates upwards, and as such\ncan be handled from the form container.\nFor example, to select the new form added for form additions from the above\nexample, bind as such:\n\n.. code-block:: javascript\n\n    $('#formset').on('formAdded', function(event) {\n        newForm = event.target;\n        //Do Stuff\n    });\n\nIf the forms can be deleted, and contain a delete checkbox,\nthe following actions occur:\n\n* When the checkbox is checked, marking the form for deletion,\n  the ``formDeleted`` event is fired on the ``data-formset-form`` container,\n  and the ``data-formset-form-deleted`` attribute is added.\n\n* When the checkbox is unchecked, marking the form as active again,\n  the ``formAdded`` event is fired on the ``data-formset-form`` container,\n  and the ``data-formset-form-deleted`` attribute is removed.\n\nIf the forms can be deleted, and contain a delete button,\npressing the delete button will toggle the delete checkbox for that form.\nThe ``DELETE`` field should be hidden if the delete button is used.\nThe delete button is identified by the ``data-formset-delete-button`` attribute:\n\n.. code-block:: html+django\n\n    {% for form in formset %}\n        \u003cdiv data-formset-form\u003e\n            {{ form.name }}\n            {{ form.age }}\n\n            \u003cdiv class=\"hidden\"\u003e{{ form.DELETE }}\u003c/div\u003e\n            \u003cbutton type=\"button\" data-formset-delete-button\u003eDelete form\u003c/button\u003e\n        \u003c/div\u003e\n    {% endfor %}\n\nIf the ``animateForms`` option is set when the formset is created,\nadding and deleting forms will be animated by sliding the forms in and out.\n\nIf the forms can be ordered and contain a order input field, it is expected\nthat the forms are in order on page load\n\nIf the forms contain two ordering buttons, identified by ``data-formset-move-up-button``\nand ``data-formset-move-down-button``, those buttons modify the value in the\norder input field by swapping it's value with the closest lower or higher value.\nIn this case, the ``ORDER`` field should be hidden.\n\nIf the ``reorderMode`` option is set to ``dom``, the forms will change their places\nin the DOM each time one of the ``ORDER`` fields is being changed. If it is set to\n``animate``, they will be sliding onto their new places. **Attention**: The animated\nordering feature has to make assumptions about your markup and CSS, e.g. that both your\nformset container (``data-formset-body``) and your form (``data-formset-form``) are ``div``\nelements and can be to ``position: relative``/``position: absolute`` for the the time of\nthe animation without harm. *This might not work for you out of the box*.\n\nOptions\n*******\n\nThe jQuery plugin takes the following options:\n\n``form``:\n  The selector to find forms.\n  Defaults to ``[data-formset-form]``.\n\n``emptyForm``:\n  The selector to find the empty form template.\n  Defaults to ``script[type=form-template][data-formset-empty-form]``.\n\n``body``:\n  The selector to find the formset body.\n  New forms will be inserted at the bottom of this element.\n  Defaults to ``[data-formset-body]``.\n\n``add``:\n  The selector to find the add button.\n  Defaults to ``[data-formset-add]``.\n\n``deleteButton``:\n  The selector to find the delete button within a form.\n  Defaults to ``[data-formset-delete-button]``.\n\n``hasMaxFormsClass``:\n  The class added to the formset when the maximum number of forms is reached.\n  The maximum number of forms is pulled from the management form.\n  Defaults to ``has-max-forms``.\n\n``animateForms``:\n  Whether to animate form addition/deletion.\n\n``reorderMode``:\n  Can be ``none``, ``dom`` or ``animate``, see above for an explaination.\n  Defaults to ``none``.\n  Defaults to ``false``.\n\nJavascript API\n--------------\n\nIf the bundled functionality is not for you,\nyou can interact with the formset using the JavaScript API.\nAll the behaviour is driven by a ``Formset`` class.\nTo get a ``Formset`` for an element, call:\n\n.. code-block:: javascript\n\n    var formset = $('#my-form').formset('getOrCreate');\n\nThis can be called multiple times on a single element,\nand will always return the same ``Formset`` instance.\nAll the methods and attributes listed below operate on a ``Formset`` instance.\n\n``Formset.opts``\n    The options used to create this ``Formset``.\n\n``Formset.$formset``\n    The element the ``Formset`` was created for.\n\n``Formset.$emptyForm``\n    The empty form template used to create new forms.\n\n``Formset.$body``\n    The element where new forms are created.\n\n``Formset.$add``\n    The button used to add new forms.\n\n``Formset.addForm()``\n    Add a form to the ``Formset``.\n    If the maximum number of forms would be exceeded if another form was added,\n    an error will be thrown.\n\n``Formset.$forms()``\n    Get a jQuery object of all the forms in the ``Formset``.\n\n``Formset.$managementForm(field)``\n    Get a jQuery object for the management form field ``field``:\n\n    .. code-block:: javascript\n\n        // Update the TOTAL_FORMS management form field\n        this.$managementForm('TOTAL_FORMS').val(10);\n\n``Formset.totalFormCount()``\n    Count the total number of forms in the ``Formset``, including deleted forms.\n\n``Formset.activeFormCount()``\n    Count the total number of active (not deleted) forms in the ``Formset``.\n\n``Formset.deletedFormCount()``\n    Count the number of deleted forms in the ``Formset``.\n\n``Formset.hasMaxForms()``\n    Return true if the ``Formset`` has its maximum number of forms.\n\n``Formset.checkMaxForms()``\n    Check how many forms are in the ``Formset``,\n    and set the relevant classes on the ``Formset`` element\n    if the ``Formset`` has reached its limit.\n\n``empty_prefix``:\n  The prefix placeholder your formset uses for the empty form. This is only\n  needed when you subclass FormSet to change this and defaults to ``__prefix__``.\n\n\nExample\n-------\n\nA minimal example project is provided in the ``example/`` directory.\nRead ``example/README`` for more information\n\nDeveloping\n----------\n\nWhen running ``./setup.py sdist``, the JavaScript asset is minified using\nUglifyJS if it is installed. To install UglifyJS, install node.js and npm, and\nrun::\n\n    npm install uglifyjs\n\nYou can minify the scripts manually using::\n\n    ./setup.py minify\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpretix%2Fdjango-formset-js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpretix%2Fdjango-formset-js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpretix%2Fdjango-formset-js/lists"}