0

投稿に記載されている手順を使用して、インライン フォームセットに動的フォームを追加しようとしています: Add a dynamic form to a django formset using javascript in a right way

サクサクしたフォームを使用してレンダリングしているインラインフォームセットがあります。

テンプレート内のレンダリング コード:

            <div>
                {{ formset.management_form|crispy }}
            </div>
            <div id="items-form-container">
            {% for form in formset.forms %}
            <div id="item-{{ forloop.counter0 }}">
                {% crispy form formset.crispy_helper %}
            </div>
            {% endfor %}                
            </div>

新しい行を追加するために空のフォーム テンプレートが使用されます。

                    <script type="text/html" id="item-template">
                <div id="item-__prefix__">
                {% crispy formset.empty_form formset.crispy_helper %} 
                </div>
                </script>
                <a href="#" id="add-item-button" class="btn btn-info add-profile_kvp">Add profile_kvp</a>

ボタンをクリックして処理し、html と管理フォームを更新する小さな JavaScript コードがあります。

$(document).ready(function() {
    $('.add-profile_kvp').click(function(ev) {
        ev.preventDefault();
        var count = parseInt($('#id_profile_kvp-TOTAL_FORMS').val());
        var tmplMarkup = $('#item-template').html();
        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);
        $('div#items-form-container').append(compiledTmpl);

        // update form count
        $('#id_profile_kvp-TOTAL_FORMS').val(count+1);

    });
});

ボタン Add profile_kvp ボタンをクリックすると、新しい値で DOM を適切に更新でき、ブラウザで問題なく表示されます。

フォームセットを送信すると問題が発生し、views.py のフォームセットに動的に追加されたフォーム/行が表示されないため、サーバー側で動的に追加された値を表示できません。サーバー側では、新しい行がデータのない空の行として表示されます。フォームの合計値が更新されていることがわかりますが、新しいフォームはすべて空です。

どんな助けでも大歓迎です。

更新: デバッガーを使用すると、動的に追加されたフォームに値フィールドが含まれていないことがわかりました。

    form1 = with proper value = forms one was there by default using extra = 1
<tr><th><label for="id_profile_kvp-0-key">Key:</label></th><td><input id="id_profile_kvp-0-key" maxlength="255" name="profile_kvp-0-key" type="text" value="1" /></td></tr>
<tr><th><label for="id_profile_kvp-0-value">Value:</label></th><td><input id="id_profile_kvp-0-value" maxlength="255" name="profile_kvp-0-value" type="text" value="1" /></td></tr>
<tr><th><label for="id_profile_kvp-0-DELETE">Delete:</label></th><td><input id="id_profile_kvp-0-DELETE" name="profile_kvp-0-DELETE" type="checkbox" /><input id="id_profile_kvp-0-id" name="profile_kvp-0-id" type="hidden" value="49" /><input id="id_profile_kvp-0-profile" name="profile_kvp-0-profile" type="hidden" value="54" /></td></tr>

form2 added dynamically
<tr><th><label for="id_profile_kvp-1-key">Key:</label></th><td><input id="id_profile_kvp-1-key" maxlength="255" name="profile_kvp-1-key" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-1-value">Value:</label></th><td><input id="id_profile_kvp-1-value" maxlength="255" name="profile_kvp-1-value" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-1-DELETE">Delete:</label></th><td><input id="id_profile_kvp-1-DELETE" name="profile_kvp-1-DELETE" type="checkbox" /><input id="id_profile_kvp-1-id" name="profile_kvp-1-id" type="hidden" /><input id="id_profile_kvp-1-profile" name="profile_kvp-1-profile" type="hidden" /></td></tr>

form3 added dynamically
<tr><th><label for="id_profile_kvp-2-key">Key:</label></th><td><input id="id_profile_kvp-2-key" maxlength="255" name="profile_kvp-2-key" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-2-value">Value:</label></th><td><input id="id_profile_kvp-2-value" maxlength="255" name="profile_kvp-2-value" type="text" /></td></tr>
<tr><th><label for="id_profile_kvp-2-DELETE">Delete:</label></th><td><input id="id_profile_kvp-2-DELETE" name="profile_kvp-2-DELETE" type="checkbox" /><input id="id_profile_kvp-2-id" name="profile_kvp-2-id" type="hidden" /><input id="id_profile_kvp-2-profile" name="profile_kvp-2-profile" type="hidden" /></td></tr>
4

1 に答える 1

1

ほぼ5日後、私は解決策を得ました。問題はフォームタグにありました。クリスピーなフォームのレンダリングは、フォーム タグの外側で行われていました。HTML全体を分析し、問題を修正しました。したがって、基本的に質問に投稿されたコードは正常に機能します。誰もこのエラーを繰り返さないように、ここで答えを保持します。

于 2015-10-21T19:17:56.477 に答える