Problem/Motivation
Use HTMX to provide ajax pagination and exposed filters.
Steps to reproduce
Create an ajax view, use htmx for the implementation.
Proposed resolution
Make views work with htmx.
There are many out of scope changes because I tried a few things. There are things I'm doing in the wrong place but I want it to work and let people who know the subsystem tell me how to do it better.
A new feature is that we can get the URL for the HTMX request dynamically. if I have a link with a known href, instead of duplicating the URL, I can do
<a href="/some/url" data-hx-get="attr(href)">link</a>
// this will submit to
"/some/url"
and that will tell htmx to submit to the url in href, works for action attribute or any other attribute value on the element where data-hx-get is.
We can also add some query parameters (especially to set the _wrapper_format), by adding the query string after a space
<a href="/some/url" data-hx-get="attr(href) ?_wrapper_format=drupal_htmx">link</a>
// In the request this URL would be used.
"/some/url?_wrapper_format=drupal_htmx"
// works with additional params:
<a href="/some/url?filter=data" data-hx-get="attr(href) ?_wrapper_format=drupal_htmx">link</a>
// resulting URL is
"/some/url?filter=data&_wrapper_format=drupal_htmx"
About the syntax I started with [href] but took inspiration from CSS attr(), that can't really be used from JS but the syntax should be familiar to some.
Remaining tasks
User interface changes
Introduced terminology
API changes
Data model changes
Release notes snippet
Issue fork drupal-3548100
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
- views-htmx
changes, plain diff MR !13301
- 3548100-views-htmx
compare
Comments
Comment #3
nod_This MR builds on #3546105: Automatically manage _wrapper_format for HTMX requests and clean up ajax_page_state in urls, #3545179: Refactor ConfigSingleExportForm to use HTMX, #3538544: Ajaxify the user interface translation forms, which is why the diff is important.
To test, toggle the "use ajax" setting on the view you want (I only tested the /admin/content table and exposed filter at this point).
Comment #5
nod_Comment #6
nod_Comment #7
fathershawnIf it helps, I also did some views work in the contrib module. There is a mini-pager: https://git.drupalcode.org/project/htmx/-/blob/1.5.x/src/Plugin/views/pager/HtmxMini.php and https://git.drupalcode.org/project/htmx/-/blob/1.5.x/htmx.module?ref_type=heads#L63
There's a display which makes use of the route option to always return a simple response: https://git.drupalcode.org/project/htmx/-/blob/1.5.x/src/Plugin/views/display/Htmx.php
And the exposed form is configured to update the view via htmx: https://git.drupalcode.org/project/htmx/-/blob/1.5.x/htmx.module?ref_type=heads#L17
Comment #8
fathershawndata-hx-get="attr(href)"is creative @nod_! Is it recreating the functionality of hx-boost?Comment #9
nod_Seems like it! the boost attribute does more than I need though,
Comment #10
quietone commentedLet's not have a question in the title, which will be the commit message.
Comment #11
nod_Comment #12
mortona2k commentedI think this ticket has a list of ajaxy things we want to do with views. Maybe not what we're looking for in a POC, but things to cover in the long run? https://www.drupal.org/project/drupal/issues/2022297