动态更新& HTMX

Question

我有这个表单设置

​

​

这就是我想要发生的事情；当用户选择一个“室内制造商”时，它会提供一个属于“室内制造商”的“室内模型”列表。“户外制造商”与其相应的“户外模式”相同之处

使用下面的代码，我可以使用HTMX实现上述功能。

但是，下一步是在HTMX中添加“室内/室外相同”复选框，将数据从“室内制造商”复制到“户外制造商”。

我试着实现我所知道的基本知识，但它并没有完全实现我想做的事情--因为它是对数据进行复制，但在第一次加载时只有一次。

窗体

从django导入表单from.models导入维护。从units.models导入系统导入模型，冷却器，从installs.models导入安装从bootstrap_datepicker_plus导入DatePickerInput，DateTimePickerInput从dynamic_forms导入DynamicField，DynamicFormMixin

class CreateSystem(DynamicFormMixin, forms.ModelForm):

    def indoor_choices(form):
        owner = form['indoor_manufacturer'].value()
        return Cooler.objects.filter(manufacturer=owner, in_out="indoor")

    def indoor_initial(form):
        owner = form['indoor_manufacturer'].value()
        return Cooler.objects.filter(manufacturer=owner, in_out="indoor").first()  

    def outdoor_choices(form):
        owner = form['outdoor_manufacturer'].value()
        return Cooler.objects.filter(manufacturer=owner, in_out="outdoor")

    def outdoor_initial(form):
        owner = form['outdoor_manufacturer'].value()
        #print (form['outdoor_manufacturer'].value())
        return Cooler.objects.filter(manufacturer=owner, in_out="outdoor").first()

    def outdoor_manufacturer_choices(form):
        same_mamanufacturer = (form['manufacturer_boolean'].value())
        condition = (form['indoor_manufacturer'].value())
        if same_mamanufacturer is False:
            return Make.objects.all()
        else:
            return Make.objects.filter(id=condition)

    manufacturer_boolean = forms.BooleanField(
        initial=True, 
        widget=forms.CheckboxInput(attrs={
            'class':'form-control', 
            'autocomplete': 'off',
            'hx-get': '/companies/indoor_manufacturer/',
            'hx-target': '#id_outdoor_manufacturer'}))

    indoor_manufacturer = forms.ModelChoiceField(
        queryset=Make.objects.all(),
        initial=Make.objects.first(), 
        widget=forms.Select(
            attrs={
            'class': 'form-control', 
            'autocomplete': 'off', 
            'hx-get': '/companies/indoor_coolers/', 
            'hx-target': '#id_indoor_cooler'}))

    outdoor_manufacturer = DynamicField(forms.ModelChoiceField,
        queryset=outdoor_manufacturer_choices,
        widget=forms.Select(
            attrs={
            'class': 'form-control', 
            'autocomplete': 'off', 
            'hx-get': '/companies/outdoor_coolers/',
            'hx-target': '#id_outdoor_cooler'}))

    indoor_cooler = DynamicField(forms.ModelChoiceField, 
        queryset=indoor_choices, 
        initial=indoor_initial, 
        widget=forms.Select(
            attrs={
            'class': 'form-control'}))

    outdoor_cooler = DynamicField(forms.ModelChoiceField, 
        queryset=outdoor_choices, 
        initial=outdoor_initial, 
        widget=forms.Select(
            attrs={
            'class': 'form-control'}))

    class Meta:
        model   = System
        fields  = ['manufacturer_boolean','outdoor_manufacturer','indoor_manufacturer','indoor_cooler','outdoor_cooler']

urls

from django.urls import path, re_path
from.import views

urlpatterns = [
    path('', views.company_list, name='companies'),
    path('zones/', views.zone_list, name='zone_list'),
    path('zones/<int:id>', views.zone_detail, name='zone_detail'),
    path('create/', views.company_create, name="company_create"),
    path('<int:id>/', views.company_detail, name="company_detail"),
    path('<int:id>/update/', views.company_update, name="company_update"),
    path('<int:id>/system_detail/', views.system_detail, name="system_detail"),
    path('<int:id>/system_create/', views.system_create, name="system_create"),
    path('<int:id>/install_create/', views.install_create, name="install_create"),

    path('indoor_coolers/', views.indoor_coolers, name='indoor_coolers'),
    path('outdoor_coolers/', views.outdoor_coolers, name='outdoor_coolers'),
    path('manufacturer_boolean/', views.manufacturer_boolean, name='manufacturer_boolean'),
    path('indoor_manufacturer/', views.indoor_manufacturer, name='indoor_manufacturer'),
]

视图

from django.shortcuts import render, redirect
from django.contrib.auth.decorators import login_required
from.models import Customer, Zone
from units.models import System, Maintenance, Cooler, Make
from units.forms import CreateSystem
from installs.models import Install
from django.http import HttpResponse, JsonResponse
from .import forms
from dateutil.relativedelta import relativedelta
import datetime

def system_create(request, id):

    page_live = False
    user_active_required = True

    if not request.user.userprofile.is_verified and user_active_required:
        return redirect('accounts:activate')

    elif not request.user.is_staff and not page_live  :
        return redirect('coming_soon')

    else:

        owner_id = id
        customer = Customer.objects.get(id = id)

        if request.method == 'POST':
            form = CreateSystem(request.POST)
            if form.is_valid():
                #add this data later
        else:
            form = CreateSystem()
            
        return render(request, 'systems/system_create.html',{'form':form, 'owner_id':owner_id,
            'customer':customer,})

def indoor_coolers(request):
    form = CreateSystem(request.GET)
    return HttpResponse(form['indoor_cooler'])

def outdoor_coolers(request):
    form = CreateSystem(request.GET)
    return HttpResponse(form['outdoor_cooler'])

def manufacturer_boolean(request):
    form = CreateSystem(request.GET)
    return HttpResponse(form['manufacturer_boolean'])

def indoor_manufacturer(request):
    form = CreateSystem(request.GET)
    return HttpResponse(form['indoor_manufacturer'])

Answer 1

我为#id_outdoor_manufacturer & #id_manufacturer_boolean添加了一个"change“触发器，因此它侦听任何更改，然后运行outdoor_manufacturer_choices if/ outdoor_manufacturer_choices条件