I wanted to use the dynamic search by html in django but I have a problem: the search works but after entering DetailView of the searched item and returning to ListView with the back button in a web browser,there is search data in the inputs, but filter does not work. I have a full list.
Search form:
<form id="serach_form" hx-post = "{% url 'geo_service:filter-ots' %}"
hx-target='#results'
hx-trigger="change">
{% csrf_token %}
<div class="row g-3 align-items-center pb-4">
<div class="col-6">
<input type="text"
id="search_name_input"
hx-post = "{% url 'geo_service:filter-ots' %}"
hx-target='#results'
hx-trigger="keyup changed delay:500ms"
name="ots_search_name"
class="form-control"
placeholder="OTS Name input">
</div>
<div class="col-auto">
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="inlineCheckbox1" name="ots_search_otdrSupported" value="option1" checked>
<label class="form-check-label" for="inlineCheckbox1">otdrSupported</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" name="ots_search_fiberAscStatus" id="inlineCheckbox2" value="option2" >
<label class="form-check-label" for="inlineCheckbox2">fiberAscStatus</label>
</div>
</div>
</div>
</form>
Views:
class OtsListView(LoginRequiredMixin, generic.ListView):
template_name = 'geo_service/ots_list.html'
queryset = ConnectionOts.objects.filter(active = True, otdrSupported = "Boolean_true")
def filter_ots(request):
ots_search_name = request.POST.get('ots_search_name')
ots_search_otdrSupported = request.POST.get('ots_search_otdrSupported')
ots_search_fiberAscStatus = request.POST.get('ots_search_fiberAscStatus')
condition = Q(guiLabel__icontains = ots_search_name)
if ots_search_otdrSupported:
condition &= Q(otdrSupported = "Boolean_true")
if ots_search_fiberAscStatus:
condition &= Q(fiberAscStatus = "Boolean_true")
results = ConnectionOts.objects.filter(condition)
context = {'object_list': results}
return render(request, 'geo_service/partials/ots_results.html',context)
I tried to manually force an event to make html work but it doesn't work.
var btnBack = performance.getEntriesByType("navigation");
if (btnBack[0].type === "back_forward") {
form_search = document.getElementById('serach_form')
var event = new Event('change',{ bubbles: true })
form_search.dispatchEvent(event);
};
I will be grateful for suggestions on how to do this.