2016-11-21 155 views
4

所以我已经设置了以下示例代码,其次是内联formset的外键示例详细信息。我还添加了一些动态功能,以便您可以通过Jquery为formset添加更多行。我从http://stackoverflow.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax得到了jquery部分。我尝试了两个实现,但它似乎有相同的结果。我在想,如果我在视图中做了错误的事情。Django:动态formset与jquery只保存第一个formset实例

views.py

def project_detail (request, project_id): 
    project = Project.objects.get(id = project_id) 
    sample_form = SampleForm(request.POST or None, request.FILES or None, instance = project) 
    SampleInlineFormSet = inlineformset_factory(Sample, SampleDetail, form=SampleDetailForm, extra=1, can_delete = False) 
    formset = SampleInlineFormSet(request.POST or None, request.FILES or None, prefix="nested") 
    if request.method == "POST": 

     if 'sampleform' in request.POST: 
      if sample_form.is_valid() and formset.is_valid(): 
       sample_temp = sample_form.save() 
       sample = Sample.objects.get(pk = sample_temp.pk) 
       objects = formset.save(commit=False) 
       for object in objects: 
         object.sample = sample 
         object.save() 

       messages.success(request, "Sucessfully Created New Sample Log") 
       return HttpResponseRedirect(reverse('projstatus:project_detail', args=(project_id,)))   
    context = {'project' : project, "sample_form":sample_form, 'formset' : formset} 
    return render(request, 'projstatus/detail.html', context) 

forms.py

<form method='POST' action='' enctype='multipart/form-data'>{% csrf_token %} 
      {% crispy sample_form %} 

      <div id="form_set"> 
       {{ formset.management_form }} 
       {% for form in formset.forms %} 
        <table class='no_error'> 

         {{ form.as_table }} 
        </table> 
       {% endfor %} 
      </div> 
      <input type="button" value="Add More" id="add_more"> 

      <div id="empty_form" style="display:none"> 
       <table class='no_error'> 
        {{ formset.empty_form.as_table }} 

       </table> 
      </div> 
      <script> 
       $('#add_more').click(function() { 
        var form_idx = $('#id_form-TOTAL_FORMS').val(); 
        $('#form_set').append($('#empty_form').html().replace(/__prefix__/g, form_idx)); 
        $('#id_form-TOTAL_FORMS').val(parseInt(form_idx) + 1); 
       }); 
      </script> 


       <button type='submit' class='save btn btn-default' name = 'sampleform'>Save</button>  

      </form> 

不过,我只有第一个表单集实例保存过这个问题。不管我动态投入多少。有人可以帮我吗?

编辑:

形式 enter image description here

POST数据的使用JQuery多加一个实例时的外观(总共2个实例) enter image description here

POST数据未使用jQuery时,设置额外= 2.(共2例) enter image description here

+0

问题可能出在您的'#add_more'点击处理程序中。比较'request.POST'的值和不加Javascript(在视图中调整'extra'而不是点击'add more'),并确保你提交的是完全相同的数据。 – Alasdair

+0

@Alasdair嗨,感谢您的意见。我更新了POST数据。似乎它可能是导致问题的Jquery案例中的“undefined”事件 –

+0

您的jQuery发布数据缺少'nested-1-id','nested-1-location'等等。 – Alasdair

回答

2

我觉得你的问题是你的问题是你的javasc RIPT。看起来你从另一个浮动的例子中摘取了这段代码。

var form_idx = $('#id_form-TOTAL_FORMS').val();

对于这项工作,需要有与id_form-TOTAL_FORMSid的元素。

但我认为你的表单可能会有这样的输入,其ID为id_nested-TOTAL_FORMS或类似的东西。因此,我不认为你的JavaScript实际上更新了Formset的管理表单数据。

你应该检查你的页面上的html,看看这个输入是什么id。此外,使用JavaScript控制台来查看你的JS代码真的在做什么。

+0

非常感谢!我试图将#id_form-TOTAL_FORMS更改为#id_nested-TOTAL_FORMS,它起作用! –

1

与上一个答案一样,nested-TOTAL_FORMS字段值需要根据每次添加行时的行数进行更新。您当前正在更新不存在的字段form-TOTAL_FORMS

尝试从#id_form-TOTAL_FORMS更新JS来#id_nested-TOTAL_FORMS

也有可能是一种方式来获得ID字段作为一个模板变量但脱离了我的时刻。

+0

非常感谢!我试图将#id_form-TOTAL_FORMS更改为#id_nested-TOTAL_FORMS,它起作用! –