如何使用 Django HTMX 在一个表单上保留多个 select 对象的值

Question

想象一个包含多个列的待办事项列表，包括优先级、状态、分配给、截止日期。现在我在这个列表下方有一个表单，其中每个条件都有一个 ChoiceBox（在一种情况下是 ModelChoiceBox）。因此，将优先级设置为 2，列表将刷新为 2。现在 select Status = 3 例如，这两个过滤器应该合并。然而，在我看来，它们不是。最近的Select的值过来了，但是他之前的值重置为None。这是一个精简的例子，只有 2 Selects.


class FilterForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.attrs = {"novalidate": '', }

    priority = forms.ChoiceField(
        choices=PRIORITY_CHOICES,
        widget=forms.Select(attrs={
            'hx-get': reverse_lazy('change-priority'),
            'hx-target': '#tasklist',
            'hx-trigger': 'change'
        })
    )

    status = forms.ModelChoiceField(queryset=TaskStatus.objects.all(),
             widget=forms.Select(attrs={
              'hx-get': reverse_lazy('change-priority'),
              'hx-target': '#tasklist',
               'hx-trigger': 'change'
              })
          )

这是一个缩小的视图：

def change_priority(request):
    filtform = FilterForm(request.POST)

   
    fpriority = filtform["priority"].value()

    fstatus = filtform["status"].value()
    tasklist = get_object_or_404(TaskList, owner=request.user)
    if tasklist:
        tasks = Task.objects.filter(priority=fpriority, status=fstatus)

        context = {
            "tasks": tasks,
            "filtform": filtform,
            
        }

        return render(request, "planner/partials/tasklist.html", context)
    return HttpResponse("Error - No Valid Task List")

因此更改优先级会向视图发送正确的 Selected 值，状态为 None。然后Select Status，希望保留Priority，但是不行。现在我得到了 Status 的正确值，但是 Priority 是 None.

所以你看我正在尝试构建一系列动态更新列表并且是累积的列表过滤器。知道我该怎么做吗？

Answer 1

由于您没有通过 HTMX 提交整个表单，因此您需要使用 hx-include attribute.

在 HTMX 请求中明确包含其他表单元素

class FilterForm(forms.Form):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.attrs = {"novalidate": '', }

    priority = forms.ChoiceField(
        choices=PRIORITY_CHOICES,
        widget=forms.Select(attrs={
            'hx-get': reverse_lazy('change-priority'),
            'hx-include': '[name="status"]',
            'hx-target': '#tasklist',
            'hx-trigger': 'change'
        })
    )

    status = forms.ModelChoiceField(
        queryset=TaskStatus.objects.all(),
        widget=forms.Select(attrs={
           'hx-get': reverse_lazy('change-priority'),
           'hx-include': '[name="priority"]',
           'hx-target': '#tasklist',
           'hx-trigger': 'change'
        })
     )

你也可以把它放在共同的父元素上，因为它是继承的。

如何使用 Django HTMX 在一个表单上保留多个 select 对象的值

How to preserve values from multiple select objects on one form using Django HTMX

django

django-views

htmx