Please see to the screenshot, unable to figure out the reason why the drop down don’t show the last value ‘Person 6’ while, its been populated in the html of that page.
Request help to understand the issue - Thank you!
Scenario is, user clicks the ‘+’ button and a modal form opens. Form to add new party will be displayed. Once the user clicks submit button on the modal form, the modal closes and the dropdown is expected be updated, but, instead its not getting updated though the page reflects the new addition.
Including the view which resulted this issue.
views.py
@login_required
def AddView(request):
addForm = AddForm(request. POST or None)
if request.method == "POST":
if addForm.is_valid():
addForm.save()
response = HttpResponseRedirect(reverse('entry:entries'))
response ['HX-Trigger'] = 'Partyadded'
return response
else:
addForm = AddForm()
context = {
'addForm': addForm
}
return render(request,"entry/addNew.html",context)
Part of the template
<div id='form-div' hx-trigger="load, Partyadded from: body">
{% include 'partials/new_entry.html' %}
</div>
the “new_entry.html” does have the form to make new entry.
Is that a browser-standard select list, or is that a select list being handled by some JavaScript? If the latter, you may need to look for some way to cause the JavaScript to reinitialize the list. My guess would be that it reads the list once and then caches it.
You can test/verify this by removing any enhancements for that select list and trying it with the standard widget.
Its not retrieved by Javascript.
Javascript is only for handling the modal form’s show/hide options.
Data is retrieved by html only.
How to fix the issue? please.
I am trying to achieve this Dropdown update through HTMX. And I believe I’m half way through. Hope I need to tweak some htmx codes. But not sure though.
Or Can I replace the below response (from above view) with any other response to reload the whole page?
response = HttpResponseRedirect(reverse('entry: entries'))
I’m not asking if the select box is retrieved by JavaScript.
I’m asking if the select box itself is just a standard html <select> widget, or if you’re using a JavaScript library (e.g. Select2) to modify the “look & feel” or behavior of that select box.
fine.
The below is the forms.py part & html part.
Hope there isn’t any special features added to that dropdown.
class AddForm(forms.ModelForm):
party = forms.ModelChoiceField(queryset=Party.objects.all())
class Meta:
model = Entry
fields = "__all__"
widgets = {
'party': forms.Select(attrs={'style':'max-width: 14em'}),
...
def __init__(self, *args, **kwargs):
super(AddForm, self).__init__(*args, **kwargs)
self.helper = FormHelper()
self.helper.form_show_labels = False
HTML:
<div class="input-group">
<span class="input-group-text mb-3" style="padding-left:4%; padding-right:6%; width:110px;">Party:</span>
{{ addForm.party|as_crispy_field }}
<button type="button" class="btn btn-secondary mb-3"
hx-get="{% url 'Entry:add-party' %}"
hx-target="#dialog">
<i class="fa fa-plus"></i>
</button>
</div>
That doesn’t show if there is any JavaScript added on that page that would alter or modify the behavior of the widget. What are all the third-party JavaScript modules being loaded?
Javasript is used for only showing / hiding the modal form. There isn’t any connection with this form.
Javascript works only after the ‘+’ sign is clicked and ‘save’ button clicked on that modal form.
this dropdown is in the form in that page itself.
You’re using Crispy on that field, right? Are you using one of the Crispy form helpers?
Either way, you may want to consider re-rendering that entire field instead of just the option list - that may end up being the most reliable way of handling this.
