如何通过AJAX设置Django表单vals

时间:2012-04-25 08:57:30

标签: python ajax django modelform inline-formset

我正在尝试使用带有AJAX调用的Django生成表单来处理数据。我只有一个简单的ModelForm工作,但当我添加一个inlineformset时,我也迷失了我应该在一些隐藏的id字段中填充的值。每个提交都在创建一个新实例。对于有地址的学校我在保存视图中有这个:

... 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 ...

这是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');
  });

我应该把什么想法放在那里?

1 个答案:

答案 0 :(得分:1)

如果您已经有可用的学校实例,那么将数据绑定到视图中的formset似乎更容易。以下代码应该允许您不必担心id,隐藏字段等,因为formset已经完成了所有处理。

当您发布表单集时,您已经拥有代码

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

所以不是用json数据填充,为什么不呢

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)中?使用用于编辑学校的链接,您将拥有一个元素,用于表单集的去向。 (据推测,您已将学校对象传递给模板,并有一个提交按钮等。)

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作为锚标签属性将验证为适当的属性,但我理解,&#34;它的工作原理&#34;。我通常在隐藏的输入中存储类似于schoolid的内容以在js中访问它,尽管可能有更优雅的方式

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