javascript - formset django ejemplo

¿Cómo harías un formset dinámico en Django?

Question

Así es como lo estoy haciendo:

{{ formset.management_form }}
<table>
    {% for form in formset.forms %}
        {{ form }}
    {% endfor %}
</table>
<a href="javascript:void(0)" id="add_form">Add Form</a>   

Y aquí está el JS:

var form_count = {{formset.total_form_count}};
$(''#add_form'').click(function() {
    form_count++;
    var form = ''{{formset.empty_form|escapejs}}''.replace(/__prefix__/g, form_count);
    $(''#forms'').append(form)
    $(''#id_form-TOTAL_FORMS'').val(form_count);
});

Lo que me molesta específicamente es que tuve que escribir yo mismo esa etiqueta de plantilla de escapejs . Simplemente elimina todas las líneas nuevas y escapa de las comillas simples para que no estropee mi cadena. Pero, ¿qué es exactamente lo que los fabricantes de Django esperan que hagamos en esta situación? ¿Y por qué tienen este campo TOTAL_FORMS oculto, cuando podrían haber usado una matriz como <input name="my_form_field[0]" /> y luego contaron su longitud?

Answer 1

Es porque formset se ha creado para funcionar sin javascript , utilizando solo el flujo de trabajo HTTP habitual.

Django es javascript agnóstico.

Si desea agregar algo de javascript a la mezcla, puede usar el complemento dedicado de jquery .

Answer 2

Esta pregunta es un poco vieja, pero también me tomó un tiempo resolver esto.

Sugiero representar formset.empty_form en su plantilla como un campo oculto, y hacer referencia a este campo en su javascript.

Este es un ejemplo de conjunto de formularios dinámico del sitio de administración de django: (pero tenga en cuenta que no se ha actualizado para usar empty_form ...)

[js] http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/media/js/inlines.js

[plantilla html] http://code.djangoproject.com/browser/django/trunk/django/contrib/admin/templates/admin/edit_inline/tabular.html

Answer 3

Hay algunos casos de XSS posibles cuando se usa formset.empty_form como una cadena, reemplazando ''__prefix__'' al índice de forma real de formset. Mi aplicación conectable convierte formset.empty_form en la plantilla Knockout.js que luego se clona a través de enlaces personalizados de Knockout.js. Además, Knockout.js vuelve a calcular automáticamente los índices de ID de campo de formulario, cuando el formulario formset recién agregado se elimina dinámicamente antes de que se envíe todo el formulario con inlineformsets. Aquí está la documentación:

https://django-jinja-knockout.readthedocs.org/en/latest/forms.html#dynamically-adding-new-related-formset-forms

El enlace Knockout.js también evita que XSS al cargar campos personalizados con Javascript en línea.

Answer 4

Hay algunos lugares en Django donde "la razón" se debe a que fue así como se implementó para la aplicación de administración de Django, y creo que este es uno de ellos. Por lo tanto, la respuesta es que esperan que implementes tu propio javascript.

Vea esta pregunta SO Agregando dinámicamente un formulario ... para algunas más ideas de javascript.

También hay dos aplicaciones conectables disponibles, django-dynamic-formset y django-dinamyc-form que no había visto hasta ahora cuando django-dinamyc-form la primera.

Answer 5

en mi caso. Usé el complemento django-dynamic-formset ( https://code.google.com/p/django-dynamic-formset/wiki/Usage )

y modificó la opción "agregado" y funcionó bien.

        $(''#formset-table tbody tr'').formset({
            prefix: ''{{ formset.prefix }}'',
            formCssClass: ''{{ formset.prefix }}-inlineformset'',
            added: function(obj_tr){ 

                var form = $(obj_tr).html().replace(//-(/w+)/-(/w+)(fix__)/-/g, ''-'');
                $(obj_tr).html(form);

           },

esta expresión regular reemplaza la cadena [prefijo] - prefijo par ''-''

Tal vez no sea la mejor solución, pero funcionó.