AJAX를 통해 Django 폼 값을 설정하는 방법

Question

데이터 모집단에 대해 Ajax 호출로 장고 생성 양식을 사용하려고합니다. 나는 일반 ModelForm을 사용하고 있지만 inlineformset을 추가하면 숨겨진 ID 필드에 어떤 값을 채워야하는지 알 수 없습니다. 모든 제출은 새 인스턴스를 작성합니다. 주소가있는 학교의 경우 내 저장보기에 다음 번호가 있습니다.

내 양식을 채우는 JS입니다. #id_address_set-0-school 및 #id_address_set-0-id은 장고 생성 필드 2 개입니다.

$('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

이미 학교 인스턴스를 사용할 수 있다면 데이터를보기의 formset에 쉽게 바인딩 할 수있는 것처럼 보입니다. 다음 코드는 id, 숨겨진 필드 등에 대해 걱정할 필요가 없습니다. 왜냐하면 formset은 이미 처리 한 모든 것을 가질 것이기 때문입니다. 당신이 해당 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}) 

? 학교를 편집하기위한 링크가 있으면 formset을 가져올 위치에 대한 요소를 갖게됩니다.

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

school_address.html이 될 수

school.html (아마도 당신은 이미 등, 템플릿에 학교 ​​객체를 전달하고, 제출 버튼이 있습니다)로 간단하게

{{ address_formset }} 

이제 javascript에서 success 함수는 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가 적절한 속성으로 유효성을 검사합니다 생각하지 않는다, 그러나 나는 "작동"이해합니다. 나는 더 우아한 방법이 있을지 모르지만 보통은 숨겨진 입력에 학교원 같은 것을 저장합니다. 더 우아한 방법이있을 수 있지만, 더 세련된 방법이있을 수 있습니다.

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