I have created 2 modals in separate html files to handle creation and update of the applicant status. Both modals are triggered on the same page, the applicant detail, and are showing the form, and the update form is not displaying the data, even though the clickable button shows the correct link.
applicant_detail.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 %}
applicant_detail_view
@login_required()
def applicant_detail_view(request, pk):
applicant_detail = Applicant.objects.get(id=pk)
form = ApplicantStatusCreateForm
update_form = ApplicantStatusUpdateForm
applicant_status_detail = ApplicantStatus.objects.filter(applicant__id=applicant_detail.id)
prev_post = Applicant.objects.filter(id__lt=pk).order_by('id').last()
next_post = Applicant.objects.filter(id__gt=pk).order_by('id').first()
context = {
'applicant_detail': applicant_detail,
'form': form,
'update_form': update_form,
'applicant_status_detail': applicant_status_detail,
'prev_post': prev_post,
'next_post': next_post,
}
return render(request, 'recruitment/applicant_detail.html', context)
applicant_status_create.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>
applicant_status_edit.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">
{{ update_form.applicant.label }}
</div>
<div class="mb-2">
{{ update_form.applicant }}
{{ update_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>
I am using bootstrap without custom jquery (itâs loaded in the base.html) and the create form is submitting the data correctly and itâs showing the data in the page after submission.
Here are the 2 views:
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})
Here are the 2 forms:
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
How can I get the existing data to show in the modal update form?
