red-france-69804
08/11/2022, 3:03 PMdjango
<input
id="search-field"
type="search"
name="search" {# this creates the 'search' GET query paramater #}
hx-get="{% querystring %}" {# current URL with existing query parameters - search param will be added automatically #}
hx-trigger="keyup changed delay:500ms, search"
hx-target="#table-container"
hx-swap="outerHTML"
hx-push-url="true"
>
The querystring template tag you see comes from django-tables (https://github.com/jieter/django-tables2/blob/master/django_tables2/templatetags/django_tables2.py) and as explained in the source code, it allows to build a relative url, keeping already existing query parameters. This is exactly what I need when running a search, as I want to keep other query parameters (like sorting).
I'll describe my issue with an example:

If I go directly to "http://localhost:8000/objects?sort=title", I can see that the value of hx-get is hx-get="?sort=title", as expected. Which means if I run a search, the final search url suffix will be something like ?sort=title&search=foo (as expected).


 However, if I go to http://localhost:8000/objects and then use a button on my UI to trigger an HTMX query that updates the URL to "http://localhost:8000/objects?sort=title", the value of hx-get is still empty (hx-get="?").

Then, of course if I run a search, the final search url suffix misses the sorting.


 All of this is obvious because the <input> part is NEVER updated by htmx. Hence the {% querystring %} tag has is evaluated once when loading the http://localhost:8000/objects page, and can't change after that.
While I understand where my problem comes from, I'm not sure how to deal with this properly. Maybe include the <input> into the HTMX response (but feel unnatural)?
Thanks for your help.