Htmx made me a star at work. Btw

That why I’m so happy

I'm using it for building a personal project, so that then I can show it to my boss and try to convince him to use it on some new project

unfortunately a lot of our apps are data grid heavy and we use ag-grid for that, but I think we can keep ag-grid embedded on a single page, and the rest of the application just be good ol' HTML powered by htmx and some sprinkles of JS or hyperscript, instead of going full SPA https://www.ag-grid.com/

I've got a page that lets you delete individual items. The delete button on each item does an hx-post to delete an item and then returns a 302 to the url that generates the list. The intention is to make another request to reload the list. Unfortunately the browser caches the page so it doesn't work as intended. Perhaps this isn't a pattern that htmx is happy with. Am I heading down the wrong path?

is the cache policy for the URL it is being redirected to aggressive?

Any chance you could use the

delete

option for

hx-swap

?

I got this working perfectly - thank you. One thing that's not really htmx/hyperscript related, but puzzling, is that my SSE stream seems to work perfectly via curl (ie events appear immediately on STDOUT as soon as they are generated by the backend) but when I load that URL in the browser, it shows nothing until the connection is closed. Consequently, my SSE events all happen "at once" when the connection closes. I guess it's something I'm doing wrong on the backend, but I'm puzzled as to what.

1) try chrome. I hate it as a browser, but it’s debug tools work best for SSE.

2) double check your SSE formatting. I think you need two \n\n to separate each message.

chrome and firefox are the same behaviour. data formatting looks ok - has the newline between. I'm using a gon-gonic method to generate them anyway so it should be correct. I don't need to solve this yet, so it can go on a backburner for now.

Hmmm. It is weird. If you can’t see messages in debug tools, chances are htmx won’t see them either.

Everything does work fine, except they don't trigger until the stream is closed (it's meant to close, it's returning a known number of search results). And same 'visually' if I load the URL standalone in the browser, nothing is shown until the end of the stream.

In hind sight I think something like that would have been better. Instead I just dialled down the caching.

It turns out yes :). I didn't see this issue in dev (django dev server via ngrok) but it shows up in production (nginx) 🤦‍♂️. I "fixed" this by just turning off caching for these urls using Djagno's never_cache decorator. I've been caught out a couple of times with similar cache related issues. This is a Django app. Sometimes the view will return the full page via one template when it's a non-htmx request and a part of the page using a different template when it's an htmx request. If the browser decides to cache the page that approach goes sideways. I think some docs on htmx and how it interacts with caching or some guidance on whether or not to reuse urls for full page and partial page content could save some hair pulling.

Is there a way to keep focus of an input field that was just swapped? Using python / django. I found

afterSwap

, however am not sure how to apply this to an input field. Is it just

hx-swap="afterSwap"

? however that doesn't seem to be working

autofocus attribute should work

Make sure the input has an id attribute. This allows htmx to re-focus the input after swap if it had the focus before the request.

Out of curiosity, is it possible to make one element issue multiple requests and have different targetS?

Any ideas on how to better integrate https://htmx.org/examples/edit-row/ with the Datatable plugin? I noticed that when you sort the datatable after you make a change it is reverted (although the actual record was changed)

Out of band responses would be the most direct mechanism for this

Sounds like datatables has the content cached. I would look for an api method to update it.

I just decided to re-load the table on saves and deletes. Would prefer to not have to use an API and have to convert everything to JSON.

Any advice on how to update another element that's not inside of the target? I was look at https://htmx.org/examples/update-other-content/ and using hx-swap-oob, however it's not exactly clear if the hx-swap-oob is a partial that's returned and it looks like the hx-swap-oob is still inside the scope/target of the element with id=contracts-table. I've tried several times to understand how to use hx-swap-oob, but it never seems to click with my brain...

lemme throw together an example

@User That would be amazing!! I'm using Django if that makes a difference

The button is updating its internal content, but the response includes an oob element, which is swapped out by ID "out of band"

So you need to return some content from the server side like that top little

span

and target that count thing outside your table

by them both having the same id