AJAX経由でDjangoフォームの値を設定する方法

Question

データ集計のAJAX呼び出しでDjangoで生成されたフォームを使用しようとしています。私は単純なModelFormを使っていますが、インラインフォームセットを追加すると、隠しIDフィールドのいくつかに値を設定する必要があります。すべてのサブミットは新しいインスタンスを作成しています。住所を持つ学校の場合、私は保存ビューでこれを持っています：

これは私のフォームを移入するJSです。 #id_address_set-0-schoolと#id_address_set-0-idは、2つのDjangoで生成されたフィールドです。

$('a[name^="editSchool"]').click(function(e) { 
    e.preventDefault(); 
    $.ajax({ 
    url: '/schooljson/' + this.getAttribute('schoolid') + '/' 
    }).done(function(data) { 
    $('#id_school_code').val(data.school_code); 
    $('#id_full_name').val(data.school_name); 
    $('#id_student_count').val(data.school_students); 
    $('#id_school_pk').val(data.school_pk); 
    $('#id_address_set-0-address_line_1').val(data.address_line_1); 
    $('#id_address_set-0-address_city').val(data.address_city); 
    $('#id_address_set-0-address_state').val(data.address_state); 
    $('#id_address_set-0-address_zip').val(data.address_zip); 
    $('#id_address_set-0-school').attr('value', data.school_pk); 
    $('#id_address_set-0-id').attr('value', data.address_pk); 
    $('#addSchoolModal').modal('show'); 
    }); 

アイデアは何ですか？

Answer 1

すでに学校のインスタンスがある場合は、ビュー内のフォームセットにデータをバインドする方が簡単なようです。次のコードでは、idset、hidden fieldsなどについて心配する必要はありません。なぜなら、formsetはすでに扱っているすべてのものを持っているからです。あなたがフォームセットを投稿するとき

あなたは既に持っているコード

school = school_form.save(commit=False) 
address_formset = AddressFormSet(request.POST, instance=school) 

ので、代わりにJSONデータを取り込む、元のテンプレート（school.html）ではなぜ

views.py 
def school_address(request, school_id): 
    school = School.objects.get(pk=school_id) 
    address_formset = AddressFormSet(instance=school) 
    return render(request, "school/school_address.html", 
        {'address_formset': address_formset}) 

？学校を編集するためのリンクがあれば、フォームセットのどこに行くのかという要素があります。

school.html

<form> 
<a href="" id="edit_school" schoolid="{{ school.id }}">Edit</a> 
{{ school_form }} 
<div id="school_address"></div> 
</form> 

school_address.htmlが

{{ address_formset }} 

ような単純なことができ（おそらくあなたはすでになど、テンプレートに学校のオブジェクトを渡して、送信ボタンを持っています）今javascriptで、成功関数はあなたが必要とするすべてのものが入っている学校のフォームと一緒にschool_address.htmlをすぐに削除します。

$("#edit_school").click(function(e){ 
    e.preventDefault(); 
    $.ajax({ 
    url: '/school_address/' + this.getAttribute('schoolid') + '/' 
    success: function(data){ 
     $("#school_address").html(data); 
    } 
    }); 
}); 

サイドノート - 私は、アンカータグの属性としてschoolidが適切な属性として検証されますが、私は理解して、「それは働く」とは思いません。私は通常、隠された入力にschoolidのようなものをjsでアクセスするために格納しますが、よりエレガントな方法があるかもしれません。

<input type="hidden" id="schoolid" value="{{ school.id }} />