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

Command icon 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:

Comments

nod_ created an issue. See original summary.

nod_ changed the visibility of the branch 3548100-views-htmx to hidden.

nod_’s picture

Issue summary: View changes
Status: Active » Needs work

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).

nod_’s picture

Issue summary: View changes
nod_’s picture

Issue summary: View changes
fathershawn’s picture

If 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

fathershawn’s picture

data-hx-get="attr(href)" is creative @nod_! Is it recreating the functionality of hx-boost?

nod_’s picture

Seems like it! the boost attribute does more than I need though,

quietone’s picture

Issue tags: +Needs title update

Let's not have a question in the title, which will be the commit message.

nod_’s picture

Title: Use HTMX for (some?) ajax views » [PoC] Use HTMX for (some?) ajax views
mortona2k’s picture

I 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

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.