首页 > 解决方案 > Django Bootstrap模式更新表单不显示数据

问题描述

我在单独的 html 文件中创建了 2 个模式来处理申请人状态的创建和更新。两种模式都在同一页面(申请人详细信息)上触发,并显示表单,更新表单未显示数据,即使可单击按钮显示正确的链接。

申请人详细信息.html

<div class="row mb-1">
    <div class="col">
        <h4>Applicant Status</h4>
    </div>
    <div class="col col-auto">
        <a href="#applicantStatusCreate" class="btn btn-primary text-white float-end" data-bs-toggle="modal">
        Add Applicant Status
        </a>
        {% include 'recruitment/applicant_status_create.html' %}
    </div>
</div>
<!---Applicant Status Start--->
{% for status in applicant_status_detail %}
    <div class="card mb-4">
        <div class="card-body p-4">
            <div class="row">
                <div class="col-xl-5">
                    <h5>{{ status.applicant_status }}</h5>
                    <ul class="personal-info">
                        <li>
                            <div class="title">Status Date</div>
                            <div class="text">{{ status.status_date|date:"M d, Y" }}</div>
                        </li>
                        <li>
                            <div class="title">Rating</div>
                            <div class="text">{{ status.rating }}</div>
                        </li>
                    </ul>
                </div>
                <div class="col-xl-7">
                    <a href="{% url 'recruitment:applicant_status_edit' pk=status.id %}" class="edit-icon float-end" data-bs-toggle="modal" data-bs-target="#applicantStatusUpdate">
                        <i class="fas fa-pencil-alt"></i>
                    </a>
                    {% include 'recruitment/applicant_status_edit.html' %}
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6">
                    <ul class="personal-info">
                        <li>
                            <h6>Notes</h6>
                            <div>{{ status.notes|safe }}</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
{% endfor %}

申请人状态创建.html

<div class="modal fade" id="applicantStatusCreate" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <form method="post" action="{% url 'recruitment:applicant_status_create' %}">
            {% csrf_token %}
            {{ form.media }}
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Add Applicant Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="mb-2">
                                {{ form.applicant.label }}
                            </div>
                            <div class="mb-2">
                                {{ form.applicant }}
                                {{ form.applicant.errors }}
                            </div>
                <--- code reduced for readability --->
                <div class="modal-footer">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Add Applicant Status</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

申请人状态编辑.html

<div class="modal fade" id="applicantStatusUpdate" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-dialog-centered">
        <form enctype="multipart/form-data" method="post" action="{% url 'recruitment:applicant_status_edit' pk=status.id %}">
            {% csrf_token %}
            {{ form.media }}
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Update Applicant Status</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col">
                            <div class="mb-2">
                                {{ form.applicant.label }}
                            </div>
                            <div class="mb-2">
                                {{ form.applicant }}
                                {{ form.applicant.errors }}
                            </div>
                <--- code reduced for readability --->
                <div class="modal-footer">
                    <div class="row">
                        <div class="col">
                            <button type="button" class="btn btn-outline-dark" data-bs-dismiss="modal">Cancel</button>
                            <button type="submit" class="btn btn-primary">Update Applicant Status</button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

我正在使用没有自定义 jquery 的引导程序(它加载在 base.html 中),并且创建表单正在正确提交数据,并且它在提交后在页面中显示数据。

以下是 2 个视图:

class ApplicantStatusCreateView(LoginRequiredMixin, CreateView):

    model = ApplicantStatus
    form_class = ApplicantStatusCreateForm
    template_name = 'recruitment/applicant_status_create.html'

    def get_success_url(self):
        return reverse_lazy('recruitment:applicant_detail', kwargs={'pk': self.object.applicant.id})

class ApplicantStatusUpdateView(LoginRequiredMixin, UpdateView):

    model = ApplicantStatus
    form_class = ApplicantStatusUpdateForm
    template_name = 'recruitment/applicant_status_edit.html'

    def get_success_url(self):
        return reverse_lazy('recruitment:applicant_status_detail', kwargs={'pk': self.object.applicant.id})

以下是2种形式:

class ApplicantStatusCreateForm(forms.ModelForm):
    notes = forms.CharField(required=False, widget=CKEditorWidget())
    rating = forms.IntegerField(max_value=5, min_value=0, widget=forms.NumberInput(attrs={'class': 'form-control mb-2'}))

    class Meta:
        model = ApplicantStatus
        fields = ['applicant', 'applicant_status', 'status_date', 'rating', 'notes']
        widgets = {
            'applicant': forms.Select(attrs={'class': 'form-select mb-2'}),
            'applicant_status': forms.Select(attrs={'class': 'form-select mb-2'}),
            'status_date': forms.DateInput(attrs={'type': 'date', 'class': 'form-control mb-2'}),
        }


class ApplicantStatusUpdateForm(ApplicantStatusCreateForm):

    def __init__(self, *args, **kwargs):
        super(ApplicantStatusUpdateForm, self).__init__(*args, **kwargs)
        self.fields['applicant'].disabled = True

如何让现有数据显示在模态更新表单中?

标签: djangodjango-viewsdjango-formsdjango-templates

解决方案


推荐阅读