Agregar dinámicamente un formulario a un conjunto de formularios de Django con Ajax

Quiero agregar automáticamente nuevos formularios a un conjunto de formularios de Django usando Ajax, para que cuando el usuario haga clic en un botón "agregar" ejecute JavaScript que agrega un nuevo formulario (que es parte del conjunto de formularios) a la página.

Así es como lo hago, usando jQuery :

Mi plantilla:

<h3>My Services</h3>
{{ serviceFormset.management_form }}
{% for form in serviceFormset.forms %}
    <div class='table'>
    <table class='no_error'>
        {{ form.as_table }}
    </table>
    </div>
{% endfor %}
<input type="button" value="Add More" id="add_more">
<script>
    $('#add_more').click(function() {
        cloneMore('div.table:last', 'service');
    });
</script>

En un archivo javascript:

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

Que hace:

cloneMoreacepta selectorcomo primer argumento, y typeof formset como el segundo. Lo que selectordebería hacer es pasarle lo que debería duplicar. En este caso, lo paso div.table:lastpara que jQuery busque la última tabla con una clase de table. La :lastparte de esto es importante porque selectortambién se usa para determinar después de qué se insertará el nuevo formulario. Es más que probable que lo desee al final del resto de los formularios. El typeargumento es para que podamos actualizar el management_formcampo, en particular TOTAL_FORMS, así como los campos de formulario reales. Si tiene un conjunto de formularios lleno de, por ejemplo, Clientmodelos, los campos de administración tendrán ID id_clients-TOTAL_FORMSy id_clients-INITIAL_FORMS, mientras que los campos de formulario estarán en un formato de id_clients-N-fieldnameconNsiendo el número de formulario, comenzando con 0. Así, con el typeargumento de las cloneMoremiradas de la función de cuántas formas hay actualmente, y pasa a través de cada entrada y etiqueta dentro de la nueva forma de la sustitución de todos los nombres de campo / nº ID de algo así como id_clients-(N)-nameque id_clients-(N+1)-namey así sucesivamente. Una vez finalizado, actualiza el TOTAL_FORMScampo para reflejar el nuevo formulario y lo agrega al final del conjunto.

Esta función es particularmente útil para mí porque la forma en que está configurada me permite usarla en toda la aplicación cuando quiero proporcionar más formularios en un conjunto de formularios, y no hace que necesite tener un formulario oculto de "plantilla" para duplicar siempre que lo pase, el nombre del formulario y el formato en que se presentan los formularios. Espero eso ayude.

Versión simplificada de la respuesta de Paolo usando empty_formcomo plantilla.

<h3>My Services</h3>
{{ serviceFormset.management_form }}
<div id="form_set">
    {% for form in serviceFormset.forms %}
        <table class='no_error'>
            {{ form.as_table }}
        </table>
    {% endfor %}
</div>
<input type="button" value="Add More" id="add_more">
<div id="empty_form" style="display:none">
    <table class='no_error'>
        {{ serviceFormset.empty_form.as_table }}
    </table>
</div>
<script>
    $('#add_more').click(function() {
        var form_idx = $('#id_form-TOTAL_FORMS').val();
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx));
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1);
    });
</script>

He publicado un fragmento de una aplicación en la que trabajé hace un tiempo. Similar a Paolo, pero también le permite eliminar formularios.

La sugerencia de Paolo funciona de maravilla con una advertencia: los botones de retroceso / avance del navegador.

Los elementos dinámicos creados con la secuencia de comandos de Paolo no se representarán si el usuario regresa al conjunto de formularios con el botón Atrás / Adelante. Un problema que puede ser un factor decisivo para algunos.

Ejemplo:

1) El usuario agrega dos nuevos formularios al conjunto de formularios con el botón "Agregar más"

2) El usuario completa los formularios y envía el conjunto de formularios

3) El usuario hace clic en el botón Atrás en el navegador

4) El conjunto de formularios ahora se reduce al formulario original, todos los formularios agregados dinámicamente no están allí

Esto no es un defecto con el guión de Paolo; pero un hecho de la vida con manipulación dom y caché del navegador.

Supongo que uno podría almacenar los valores del formulario en la sesión y tener algo de magia ajax cuando el conjunto de formularios se carga para crear los elementos nuevamente y volver a cargar los valores de la sesión; pero dependiendo de qué tan anal quiera ser sobre el mismo usuario y las múltiples instancias del formulario, esto puede ser muy complicado.

¿Alguien tiene una buena sugerencia para lidiar con esto?

¡Gracias!

Consulte las siguientes soluciones para los formularios dinámicos de django:

http://code.google.com/p/django-dynamic-formset/

https://github.com/javisantana/django-dinamyc-form/tree/master/frm

Ambos hacen uso de jQuery y son específicos de django. El primero parece un poco más pulido y ofrece una descarga que viene con demos que son excelentes.

Simula e imita:

• Cree un conjunto de formularios que corresponda a la situación antes de hacer clic en el botón "Agregar".
• Cargue la página, vea la fuente y tome nota de todos los <input>campos.
• Modifique el conjunto de formularios para que se corresponda con la situación después de hacer clic en el botón "Agregar" (cambiar el número de campos adicionales).
• Cargue la página, vea la fuente y tome nota de cómo <input>cambiaron los campos.
• Cree un JavaScript que modifique el DOM de manera adecuada para moverlo del estado anterior al posterior .
• Adjunte ese JavaScript al botón "agregar".

Si bien sé que los conjuntos de formularios usan <input>campos ocultos especiales y sé aproximadamente lo que debe hacer el script, no recuerdo los detalles de la parte superior de mi cabeza. Lo que describí anteriormente es lo que haría en su situación.

Hay un complemento jquery para esto , lo utilicé con el conjunto inline_form en Django 1.3, y funciona perfectamente, incluida la prepoblación, la adición, eliminación y múltiples conjuntos de formularios del lado del cliente.

Una opción sería la creación de un juego de formularios con todas las formas posibles, pero en un principio establecer las formas que no se necesiten en Oculto - es decir, display: none;. Cuando sea necesario mostrar un formulario, configure su pantalla css en blocko lo que sea apropiado.

Sin saber más detalles de lo que está haciendo su "Ajax", es difícil dar una respuesta más detallada.

Otra versión cloneMore, que permite la desinfección selectiva de campos. Úselo cuando necesite evitar que se borren varios campos.

$('table tr.add-row a').click(function() {
    toSanitize = new Array('id', 'product', 'price', 'type', 'valid_from', 'valid_until');
    cloneMore('div.formtable table tr.form-row:last', 'form', toSanitize);
});

function cloneMore(selector, type, sanitize) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var namePure = $(this).attr('name').replace(type + '-' + (total-1) + '-', '');
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;
        $(this).attr({'name': name, 'id': id}).removeAttr('checked');

        if ($.inArray(namePure, sanitize) != -1) {
            $(this).val('');
        }

    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

Hay un pequeño problema con la función cloneMore. Dado que también está limpiando el valor de los campos ocultos generados automáticamente por django, hace que django se queje si intenta guardar un conjunto de formularios con más de un formulario vacío.

Aquí hay una solución:

function cloneMore(selector, type) {
    var newElement = $(selector).clone(true);
    var total = $('#id_' + type + '-TOTAL_FORMS').val();
    newElement.find(':input').each(function() {
        var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
        var id = 'id_' + name;

        if ($(this).attr('type') != 'hidden') {
            $(this).val('');
        }
        $(this).attr({'name': name, 'id': id}).removeAttr('checked');
    });
    newElement.find('label').each(function() {
        var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
        $(this).attr('for', newFor);
    });
    total++;
    $('#id_' + type + '-TOTAL_FORMS').val(total);
    $(selector).after(newElement);
}

Creo que esta es una solución mucho mejor.

¿Cómo crearías un formato dinámico en Django?

¿Las cosas clonadas no?

• Agregar formulario cuando no existan formularios iniciales
• Maneja mejor JavaScript en la forma, por ejemplo django-ckeditor
• Mantener datos iniciales

Para los codificadores que están buscando recursos para comprender un poco mejor las soluciones anteriores:

Conjuntos de formularios dinámicos de Django

Después de leer el enlace anterior, la documentación de Django y las soluciones anteriores deberían tener mucho más sentido.

Documentación del formulario de Django

Como resumen rápido de lo que me estaba confundiendo: El formulario de administración contiene una descripción general de los formularios que contiene. Debe mantener esa información precisa para que Django conozca los formularios que agrega. (Comunidad, por favor dame sugerencias si alguna de mis palabras está fuera de aquí. Soy nuevo en Django).

@Paolo Bergantino

para clonar todos los controladores adjuntos simplemente modifique la línea

var newElement = $(selector).clone();

para

var newElement = $(selector).clone(true);

para evitar este problema

Sí, también recomendaría simplemente mostrarlos en el html si tiene un número finito de entradas. (Si no lo hace, tendrá que usar otro método).

Puedes ocultarlos así:

{% for form in spokenLanguageFormset %}
    <fieldset class="languages-{{forloop.counter0 }} {% if spokenLanguageFormset.initial_forms|length < forloop.counter and forloop.counter != 1 %}hidden-form{% endif %}">

Entonces el js es realmente simple:

addItem: function(e){
    e.preventDefault();
    var maxForms = parseInt($(this).closest("fieldset").find("[name*='MAX_NUM_FORMS']").val(), 10);
    var initialForms = parseInt($(this).closest("fieldset").find("[name*='INITIAL_FORMS']").val(), 10);
    // check if we can add
    if (initialForms < maxForms) {
        $(this).closest("fieldset").find("fieldset:hidden").first().show();
        if ($(this).closest("fieldset").find("fieldset:visible").length == maxForms ){
            // here I'm just hiding my 'add' link
            $(this).closest(".control-group").hide();
        };
    };
}

Como todas las respuestas anteriores usan jQuery y hacen que algunas cosas sean un poco complejas, escribí el siguiente script:

function $(selector, element) {
    if (!element) {
        element = document
    }
    return element.querySelector(selector)
}

function $$(selector, element) {
    if (!element) {
        element = document
    }
    return element.querySelectorAll(selector)
}

function hasReachedMaxNum(type, form) {
    var total = parseInt(form.elements[type + "-TOTAL_FORMS"].value);
    var max = parseInt(form.elements[type + "-MAX_NUM_FORMS"].value);
    return total >= max
}

function cloneMore(element, type, form) {
    var totalElement = form.elements[type + "-TOTAL_FORMS"];
    total = parseInt(totalElement.value);
    newElement = element.cloneNode(true);
    for (var input of $$("input", newElement)) {
        input.name = input.name.replace("-" + (total - 1) + "-", "-" + total + "-");
        input.value = null
    }
    total++;
    element.parentNode.insertBefore(newElement, element.nextSibling);
    totalElement.value = total;
    return newElement
}
var addChoiceButton = $("#add-choice");
addChoiceButton.onclick = function() {
    var choices = $("#choices");
    var createForm = $("#create");
    cloneMore(choices.lastElementChild, "choice_set", createForm);
    if (hasReachedMaxNum("choice_set", createForm)) {
        this.disabled = true
    }
};

Primero debe establecer auto_id en falso y así deshabilitar la duplicación de id y nombre. Debido a que los nombres de entrada deben ser únicos en su forma, toda la identificación se realiza con ellos y no con los ID. También tiene que reemplazar el form, typey el contenedor del juego de formularios. (En el ejemplo anterior choices)