HTML dynamic search with back button in a web browser

Viewed 47

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.

1 Answers

When you go back, the form is filled by the browser but the view displayed is from the search URL with no additional information on the filter state. I'd recommend using GET method on form with combination of URL change with hx-push-url="true". This way on going back the view function will receive the filtering information in the GET params.

Also when going back/forward it can happen that HTMX asks for full page instead of just the partial. Check out docs and the HX-History-Restore-Request header.

Related