Skip to content

1375 htmx target table filtering#1383

Merged
phycodurus merged 26 commits into1111-build-htmx-table-widgetfrom
1375-htmx-target-table-filtering
Jan 22, 2026
Merged

1375 htmx target table filtering#1383
phycodurus merged 26 commits into1111-build-htmx-table-widgetfrom
1375-htmx-target-table-filtering

Conversation

@phycodurus
Copy link
Copy Markdown
Member

No description provided.

also add type column to table so we can sort on it later
We re-defining the default ChoiceFilter to add htmx attributes
to it's widget. (forms.Select is the default widget, but we have to
make it explicite in order to add htmx attributes to it).
this class was mis-named: it's a FilterSet subclass for Targets.
Also django_filter defines XXXFilter (e.g. ChoiceFilter) classes
which correspond to form fields. TargetFilter would thus be a
type of Filter, not a FilterSet. So, TargetFilterSet better
reflects what this class actually is.
hx-include of "closest form" collects all the form data from the
TargetFilterSet and sends it to the {% url 'tom_targets:list' %}
as specificed in the target_list.html as query parameters.

Without this only most recently used filter is honored. With this,
all the filters are honored.
the problem at the moment is that this work alone, but
doesn not play nicely with the other filters. (We need
to honor the request parameters as we construct the db Q's).
We don't need to send an AJAX request for every single
keystroke. Wait until they stop/pause typing before sending
the request.
The queryset argument is the result of the previous filters in the
filter chain. We must furter filter this queryset with
queryset.filter(Q), not start over with Target.objects.filter(Q)!
Also, don't propagate the checkbox click to the header or else
the header will thing we're trying to sort on that column.
directly. There's no hidden button connected to the form anymore.
The FilterSet change triggers the update to both the table and
Aladin. This is an htmx triggered AJAX call that does an out-of-band
swap (i.e. the Aladin part of the DOM is "side-loaded" (updated) away
from the HTML element that generated the AJAX call).
and refer to it in the <table> element HTMX attributes defined
in tables.py. The sorting and pagination AJAX call, which are
generated by the <table> element need to know about the request
parameters from the <form> element. The id in the <form> ID
hx-include in the <table> make that happen.
The hx-boost=True attr on the <table> element is needed so that
the sorting and pagination requests are HTMX table-only reloads.
For the linkified 'name' table.Column, we need to turn off the
hx-boost so that clicking on the name brings up the TargetDetail
page as a full page reload.
Since we removed the submit button, need to make these fields
submit requests triggered by Return key-up.
We were already "side-loading" the skymap when the table page
contents changed, but we weren't loading the exact targets in the
table. This does that. We needed to create the object list (called
skymap_objects in the context) in the View.get_context_data. This is
then specified as the object_list sent to the table and skymap partials.
The Filter subclass instance and their methods remain as
examples. We may move this to the documentation.
@phycodurus phycodurus merged commit 9bfab07 into 1111-build-htmx-table-widget Jan 22, 2026
4 of 23 checks passed
@phycodurus phycodurus deleted the 1375-htmx-target-table-filtering branch January 22, 2026 22:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant