How to set Django form vals via AJAX

Question

I'm trying to use a Django generated form with a AJAX call for the data population. I have just a plain ModelForm working but when I add an inlineformset to it as well I get lost as to what values I should populate in some of the hidden id fields. Every submit is creating a new instance. For a School with an Address I have this in my saving view :

... get school logic here ...
if school_form.is_valid():
    school = school_form.save(commit=False)
    address_formset = AddressFormSet(request.POST, instance=school)
    if address_formset.is_valid():
        school_form.save()
        address_formset.save()
... redirection logic here ...

This is the JS populating my form. #id_address_set-0-school and #id_address_set-0-id are the 2 Django generated fields.

$('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');
  });

Any ideas what I should be putting there?

Answer 1

If you already have a school instance available, then it seems like it would be easier to bind the data to the formset in the view. The following code should allow you to not have to worry about the id's, hidden fields, etc, because the formset will already have all that handled.

When you POST the formset you already have the code

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

so instead of populating with json data, why not

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

In the original template (school.html)? with the link for editing the school, you would have an element for where the formset will go. (Presumably you already passes the school object to the template, and have a submit button, etc.)

school.html

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

school_address.html can be as simple as

{{ address_formset }}

now in the javascript, the success function will drop school_address.html right inline with the school form, populated with everything you need.

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

Side note - I don't think that schoolid as an anchor tag attribute will validate as a proper attribute, but I understand, "it works". I usually store something like schoolid in a hidden input to access it in js, although there may be a more elegant way

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