Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.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
Comment #14
macsim commentedPlease have a look at https://www.drupal.org/project/views_htmx
It handles views exposed filters and pager.
Comment #15
fathershawn@macsim How does your views_htmx project differ from the pager and display in ?
Comment #16
macsim commentedI'm not sure what you mean by "the pager and display in" — there is currently nothing in core on this topic yet.
If you are referring to the current MR, I haven't dug deep enough into the code here to give a proper answer. From a quick look, one thing I noticed is that
views_htmxdoesn't require a single line of JavaScript — even for pager history management — though I've only tested it with a page display so far.The second diff I see is that I didn't override "Use Ajax" behavior but added a separate "Use HTMX" option instead (which could potentially conflict with "Use Ajax" if both are enabled).
When this MR eventually lands in core, my module will most likely become obsolete. In the meantime, it might serve as a useful reference to help move this MR forward.
Could you share an update on what still needs to be done to get this merged?
Comment #17
fathershawnI'm referring to the htmx contrib module that was the initial source of htmx in Drupal before we began moving functionality into core. It has some views tooling similar to this: https://project.pages.drupalcode.org/htmx/tools/views/. If you want to work on views integration and also maintain it for Drupal <= 12.0 I'm happy to move that functionality to https://www.drupal.org/project/views_htmx.
We are currently working to make a major version update for Drupal 12 to htmx v.4 which has API changes Views work may wait a few weeks.
Comment #18
macsim commentedOops, I hadn't dug into the original module — I assumed everything it contained had been migrated into core. Thanks for the clarification!
I'd be happy to play with Views HTMX for Drupal >= 11.2 and < 12!
I've aligned my module to use the "Use Ajax" option to avoid the potential conflicts I mentioned earlier, and to make future version upgrades easier. In the meantime I also added support for table sorting.