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

Question

Aquí es la forma en que 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á la 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 que escapejs etiqueta plantilla mí mismo. Simplemente elimina todas las líneas nuevas y escapa de cualquier comilla simple para que no estropee mi cadena. Pero, ¿qué esperaban exactamente los fabricantes de Django que hiciéramos en esta situación? ¿Y por qué tienen este campo oculto TOTAL_FORMS, cuando podrían haber usado una matriz como <input name="my_form_field[0]" /> y luego haber contado su longitud?

Answer 1

Hay algunos lugares en Django donde "el motivo" es porque así fue 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.

Consulte esta pregunta Dynamically adding a form... para obtener 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 busco la primera.

Answer 2

Esta pregunta es un poco antigua, pero me tomó un tiempo darme cuenta de esto también.

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

Aquí está un ejemplo complicado juego de formularios dinámicos desde el sitio de administración de Django: (pero tenga en cuenta que no se ha actualizado para utilizar 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

es porque juego de formularios han sido creados para trabajar sin javascript, utilizando sólo el flujo de trabajo habitual HTTP.

Django es un agnóstico de Javascript.

Si desea agregar algo de javascript a la mezcla, puede usar el dedicated jquery plugin.

Answer 4

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

y modifiqué 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 reemplazar la cadena [prefijo] - prefijo pares '-'

tal vez no es la mejor solución, pero funcionó.

Answer 5

Existen algunos casos de posible XSS cuando se usa formset.empty_form como una cadena, reemplazando '__prefix__' al índice de formulario de formset real. Mi aplicación conectable convierte formset.empty_form en la plantilla Knockout.js que luego se clona a través de enlaces personalizados Knockout.js. Además, Knockout.js vuelve a calcular automáticamente los índices de identificación de campo de formulario, cuando el formulario de formset recién agregado se elimina dinámicamente antes de enviar el formulario completo con los formularios en línea. Aquí está la documentación:

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

Knockout.js vinculante también evita XSS al cargar los campos personalizados en línea con Javascript.