时间戳

首页 > 解决方案 > 使用 AJAX 的动态链接表单

javascript - 使用 AJAX 的动态链接表单

问题描述

我有两个模型：

class ModelA:
    field = models.ForeignKey(ModelB)

class ModelB:
    group = models.CharField(choices=GROUPS)
    subgroup = models.CharField(choices=SUBGROUPS)

我有一个我试图用 AJAX 动态过滤的CreateView：ModelA

class ModelACreateView(CreateView):

    def get_context_data(self, *args, **kwargs):
        context = super().get_context_data(*args, **kwargs)
        context['groups'] = GROUPS                           // Populate fields in template
        context['subgroups'] = SUBGROUPS
        return context

    def get_form_kwargs(self, **kwargs):
        kwargs = super(ModelACreateView, self).get_form_kwargs()
        kwargs.update(request=self.request)                  // Pass request to a form
        return kwargs

然后在表格中：

class ModelACreateForm(forms.ModelForm):

    def __init__(self, *args, request=None, **kwargs):
        super(ModelACreateForm, self).__init__(*args, **kwargs)
        group = request.GET.get('group')         // Get data from AJAX request
        subgroup = request.GET.get('subgroup')
        qs = ModelB.objects.filter(group=group, subgroup=subgroup)
        self.fields['field'].queryset = qs

这是脚本：

    $("#group_select, #subgroup_select").change(function () {
      var endpoint = "{% url 'new_model' %}";             // URL to CreateView
      var group = $("#group_select").val();
      var subgroup = $("#subgroup_select").val();

      $.ajax({
        url: endpoint,
        data: {
          'group': group,
          'subgroup': subgroup,
        },
        success: function (data) {
          $("#id_field").load(" #id_field");
        }
      });

    });

但是我在重新加载时遇到了问题field：它呈现为空。当我检查日志时，我看到表单得到了group, 加载qs，但随后我看到了另一个GET request，它没有group来自 AJAX，并且我得到呈现为空的表单字段。如何正确重写 AJAX？

标签： javascriptpythondjangoajax

解决方案

问题是您change对两个不同的选择使用相同的事件侦听器。这意味着查询将仅在第二次调用时包含这两个值。您可以使用几种不同的选项来解决此问题。

不需要大量更改的最简单方法是在处理 ajax 之前简单地检测两者是否都有值group。subgroup

$("#group_select, #subgroup_select").change(function () {
  var endpoint = "{% url 'new_model' %}";             // URL to CreateView
  var group = $("#group_select").val();
  var subgroup = $("#subgroup_select").val();

if(group != "" && subgroup != ""){

  $.ajax({
    url: endpoint,
    data: {
      'group': group,
      'subgroup': subgroup,
    },
    success: function (data) {
      $("#id_field").load(" #id_field");
    }
  });
}
});

推荐阅读