javascript - 如何从 Django 中的模态表单更新单个字段？

Question

我有一个表格可以跟踪人们何时进入/离开不同区域。每当出现差异时，例如，有人在进入新区域之前忘记“离开”某个区域，系统就会提示用户“估计”他们认为自己离开前一个区域的时间(edited_timestamp).主表单上仅有的两个必填字段是员工编号和工作区域，因为它们用于验证/跟踪数据。

当我尝试重现使模式出现的情况时，它起作用了，但是当我尝试提交它时，我收到这些消息:

这些是返回的错误。

现在，虽然我不明白为什么会显示“输入有效日期/时间”错误，但我猜测其他两个错误是由于主表单需要 employee_number 和 work_area 造成的，可能是因为这个请求，即使它是通过 ID 更新的，它仍然需要其他两个字段。

我想我的问题是，我如何修改它以便模态不需要这两个字段？

模型.py

class EmployeeWorkAreaLog(TimeStampedModel, SoftDeleteModel, models.Model):
    employee_number = models.ForeignKey(Salesman, on_delete=models.SET_NULL, help_text="Employee #", null=True, blank=False)
    work_area = models.ForeignKey(WorkArea, on_delete=models.SET_NULL, null=True, blank=False, help_text="Work Area", related_name="work_area")
   station_number = models.ForeignKey(Station, on_delete=models.SET_NULL, null=True, help_text="Station", related_name="stations", blank=True)
    edited_timestamp = models.DateTimeField(null=True, blank=True)
    time_exceptions = models.CharField(max_length=2, blank=True, default='', choices=EXCEPTION_STATUS)
    time_in = models.DateTimeField(help_text="Time in", null=True, blank=True)
    time_out = models.DateTimeField(blank=True, help_text="Time out", null=True)

表单.py

class WarehouseForm(AppsModelForm):
    class Meta:
        model = EmployeeWorkAreaLog
        widgets = {
            'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
        }
        fields = ('employee_number', 'work_area', 'station_number', 'edited_timestamp')

urls.py

urlpatterns = [
    url(r'enter-exit-area/$', views.enter_exit_area, name='enter_exit_area'),
    url(r'update-timestamp-modal/(?P<main_pk>\d+)/$', UpdateTimestampModal.as_view(), name='update_timestamp_modal'),
]

(为了冗余去掉了leave_area代码)

views.py

def enter_exit_area(request):
    form = WarehouseForm()
    enter_without_exit = None
    exit_without_enter = None

    if request.method == 'POST':
        temp = request.POST.copy()
        form = WarehouseForm(temp)
        if form.is_valid():
            emp_num = form.cleaned_data['employee_number']
            area = form.cleaned_data['work_area']
            station = form.cleaned_data['station_number']

            if 'enter_area' in request.POST:
                new_entry = form.save()
                EmployeeWorkAreaLog.objects.filter((Q(employee_number=emp_num) & Q(work_area=area) & Q(time_out__isnull=True) & Q(time_in__isnull=True)) & (Q(station_number=station) | Q(station_number__isnull=True))).update(time_in=datetime.now())

                # If employee has an entry without an exit and attempts to enter a new area, mark as an exception 'N', meaning they're getting the modal
                enters_without_exits = EmployeeWorkAreaLog.objects.filter(Q(employee_number=emp_num) & Q(time_out__isnull=True) & Q(time_exceptions="")).exclude(pk=new_entry.pk).order_by("-time_in")
                if len(enters_without_exits) > 0:
                    enter_without_exit = enters_without_exits[0]
                    enters_without_exits.update(time_exceptions='N')

                message = 'You have entered %(area)s' % {'area': area}
                if station is not None:
                    message += ': %(station)s' % {'station': station}
                messages.success(request, message)

    form = WarehouseForm()
    return render(request, "operations/enter_exit_area.html", {
        'form': form,
        'enter_without_exit': enter_without_exit,
    })


class UpdateTimestampModal(CreateUpdateModalView):
    main_model = EmployeeWorkAreaLog
    model_name = "EmployeeWorkAreaLog"
    form_class = WarehouseForm
    template = 'operations/modals/update_timestamp_modal.html'
    modal_title = 'Update Missing Time'

enter_exit_area.html

{% extends "base.html" %}

{% load core_tags staticfiles %}

{% block head %}
    <script src="{% static "js/operations/warehouse_enter_exit.js" %}"></script>
{% endblock head %}

{% block main %}

    {% if enter_without_exit %}
        <div id="auto-open-ajax-modal" data-modal="#create-update-modal" data-modal-url="{% url "operations:update_timestamp_modal" enter_without_exit.id %}" class="hidden"></div>
    {% endif %}

    <form id="warehouseForm" action="" method="POST" novalidate >
        {% csrf_token %}

        <div>
            <div>
                <div style="color: red">{{ form.employee_number.errors.as_text }}</div>
                <label>Employee</label>
                {{ form.employee_number }}
            </div>

            <div>
                <div style="color: red">{{ form.work_area.errors.as_text }}</div>
                <label>Work Area</label>
                {{ form.work_area }}
            </div>
            <div style="color: red">{{ form.station_number.errors.as_text }}</div>
            <div>
                <label>Station</label>
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter">Enter Area</button>
                <button type="submit" name="leave_area" value="Leave">Leave Area</button>
            </div>
        </div>
    </form>

    {% modal id="create-update-modal" title="Update Timestamp" primary_btn="Submit" default_submit=True %}

update_timestamp_modal.html

{% load core_tags %}

<form id="create-update-form" method="post" action="{% url "operations:update_timestamp_modal" main_object.id %}">
    {% csrf_token %}

    <label>Update</label>
    <div class="row">
            <div class="form-group col-xs-6">
                {% standard_input form.edited_timestamp datetimepicker=True hide_label=True %}
            </div>
    </div>
</form>

warehouse_enter_exit.js

$(function () {
    // Submit the edited timestamp form when they click the "Submit" button in the modal
    $(document).on('click', '#update-timestamp-modal-btn-primary', function (e) {
        e.preventDefault();
        forms.ajaxSubmit($('#create-update-form'), function (data) {
            if (data.success && data.redirect) {
                window.location.href = data.redirect;
            } else {
                if (data.warning) {
                    messages.warning(data.warning);
                } else {
                    messages.error("An error occurred when saving this timestamp, please try again.");
                }
            }
        });
    });
});

我可以编辑 JS 以仅更新 edited_timestamp 字段吗？或者也许我可以编辑 View 以便仅访问该 ID 来更新该字段？模式的 URL 基于 ID 访问它，所以我认为可能有一种方法可以仅基于此字段进行编辑。

Answer 1

您需要在表单代码中覆盖这些字段。像这样:

class WarehouseForm(AppsModelForm):
    employee_number = forms.ModelChoiceField(queryset=EmployeeWorkAreaLog.objects.all(), required=False)
    work_area = forms.CharField(required=False)

    class Meta...