Динамично добавляя форму к Django formset с Ajax

Моделируйте и подражайте:

• Создают formset, который соответствует ситуации прежде нажатие "добавить" кнопка.
• Загрузка страница, просмотрите источник и обратите внимание на весь <input> поля.
• Изменяют formset для соответствия ситуации после нажатие "добавить" кнопка (измените количество дополнительных полей).
• Загрузка страница, просмотрите источник и обратите внимание на как эти <input> измененные поля.
• Создают некоторый JavaScript, который изменяет DOM подходящим способом переместить его от прежде состояние к после состояние.
• Присоединение, что JavaScript к "добавить" кнопке.

, В то время как я действительно знаю, formsets используют особенный скрытый <input> поля и знают приблизительно, что должен сделать сценарий, я не вспоминаю детали первое, что пришло на ум. То, что я описал выше, - то, что я сделал бы в Вашей ситуации.

Я имею , отправил отрывок из приложения, я продолжил работать некоторое время назад. Подобный Паоло, но также и позволяет Вам, удаляют формы.

Одна опция состояла бы в том, чтобы создать formset с каждой возможной формой, но первоначально установить необязательные формы на скрытый - т.е., display: none;. Когда необходимо отобразить форму, установить, это - дисплей CSS к block или независимо от того, что является соответствующим.

Без знают больше деталей того, что делает Ваш "Ajax", трудно дать более подробный ответ.

Paolo's suggestion works beautifully with one caveat - the browser's back/forward buttons.

The dynamic elements created with Paolo's script will not be rendered if the user returns to the formset using the back/forward button. An issue that may be a deal breaker for some.

Example:

1) User adds two new forms to the formset using the "add-more" button

2) User populates the forms and submits the formset

3) User clicks the back button in the browser

4) Formset is now reduced to the original form, all dynamically added forms are not there

This is not a defect with Paolo's script at all; but a fact of life with dom manipulation and browser's cache.

I suppose one could store the values of the form in the session and have some ajax magic when the formset loads to create the elements again and reload the values from the session; but depending on how anal you want to be about the same user and multiple instances of the form this may become very complicated.

Anyone has a good suggestion for dealing with this?

Thanks!

@Paolo Bergantino

to clone all the handlers attached just modify the line

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

for

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

to prevent this problem.

Есть небольшая проблема с функцией cloneMore. Поскольку он также очищает значение автоматически сгенерированных скрытых полей django, он заставляет django жаловаться, если вы пытаетесь сохранить набор форм с более чем одной пустой формой.

Вот исправление:

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);
}