@important-cricket-63511 Unfortunately, there is a global reference to the modal. The way I currently deal with it is by using alpinejs to manage the modal, since alpine has a lifecycle method called destroy() where I can call a bootstrap method (modal.dispose()) to cleanup the reference when the alpinejs component is destroyed. While this works for modals, it is not ideal to have alpine manage really large dom elements, as it slows down the page. (also, I don't want to write javascript 🙂 This is a more general question though, as there are many other 3rd party libraries that hold references to elements on a page. This issue primarily comes up in building SPAs because in MPAs when you navigate to a new page, everything will be reset. I guess this question may boil down to a feature request to have an event like the current htmx:load, but have it be htmx:unload. Thanks for your help!

I do have some code that adds a "fire this callback when is removed from the DOM". It maintains a list of 1/ watched elements, 2/ a weak map to associate callbacks with each of those watched elements, 3/ a single global MutationObserver that watches for recursive changes on the root document with options

{childList: true subtree: true}

, 4/ every time there is some mutation in the DOM (triggered via MutationObserver), we check all of the watched elements to see if they're still in the DOM. If not, their callbacks get fired and the element is removed from the 'watched' list. There might be a better way to do this, but I use this to clean up things like dialog elements that get appended to the root of the document (i want them automatically removed when the element that triggers the dialog gets removed) Here's the code from my project (apologies, this is clojurescript code, but maybe you might find a useful bit in it)

I’m not sure if this might be too much for your needs, but I created a component system for htmx that allows you to use a mount/unmount lifecycle with pretty much any type of js component attached to dom elements. https://github.com/croxton/hda-starter-kit

Fwiw, I do think that htmx would benefit hugely from an equivalent to Stimulus for managing component lifecycles. Unlike my starter kit it would probably need to be outside the npm / es6 ecosystem to fit with the htmx philosophy. I’m still thinking about how that might be done.

can we make autocomplete input field with htmx ?

Not a great one unfortunately. We should be able to make it work w/

datalist

elements, like this: https://codepen.io/1cg/pen/LYBVaxJ?editors=1001 but safari doesn't update properly

This could help with Safari (I haven't used it but it looks promising - and thorough!) https://github.com/mfranzke/datalist-polyfill

sounds like a great htmx 2.0 feature

there is currently an undocumented

htmx:beforeCleanupElement

event that is triggered on the entire tree of removed dom elements, which is a perf issue

this is for sse/ws stuff

need to generalize it

is there a way to do client routing with htmx?

actually i know datalist in html5 but there is no option value and label i want to store data as id for foreignkey.

Hi guys. i have question about hyperscript I need to block and change the name of the submit button after a click until the server returns a response to the request. As soon as the response is received, i need to activate the button again and return the old button name I am trying to implement this with hyperscript

javascript
_="on click add [@disabled] until htmx:afterOnLoad"

This command seems to block the button until a response is received, but for some reason it does not work. Help block buttons and rename it What do I want to do There is a form that sends hx-post request. I want to make it so that when you click on the submit button, the name of the button (Submit data) changes to (Data is being sent ...) and the button is blocked After the response is received, return the name of the button (Submit data) and make the button active

_="on click toggle @disabled until htmx:afterOnLoad"

you can use django decartor @cache_query(timeout=3600) def get_data(): # This function will be cached for 1 hour cursor = connection.cursor() cursor.execute("SELECT * FROM my_table") return cursor.fetchall()

i must add this to submit input or to form ?

it is my code <button type="button" class="btn btn-secondary me-1 btn-sm" name="fatura_hareketler" value="Fatura" id="id_fatura_id" hx-get="{% url 'octopod:hx_get_invoice_form' %}" hx-trigger="click" hx-target="#objects_form" hx-swap="innerHTML" hx-params="*" _="on click toggle @disabled until htmx:afterOnLoad" >Fatura

but you should install hyperscripy library

genarally i dont form submit . i m using button for submitting

Türkmüsün ?)

yes

hangi framework kullanıyorsun django mu ?

Evet. İşledi. Target sende başka idi o üzden. Sağ ol. Bes cevab gözleyince Fatura-nı başqa bir teksde deyişmek olurmu ? Yanı misalçün Yükleniyor...

i think you can do it with hyperscript or htmx indicator. attribute hx-indicator="".htmx-indicator"

Teşekkür. Allah razı olsun

hi do you have any idea about hx-trigger="{% url 'offer:search_suppliers' %}?q={val}" this code can trigger get val parameters for input field and can trigger i m fighting with openai 🙂 he/she said thant it is possible

It doesn’t look like you’ll be able to use that AI to code with HTMX for you. Maybe you could train it! 😱 This is how far off it is https://htmx.org/attributes/hx-trigger/

The amount of material on htmx compared to other technologies is tiny, especially given that chatgpt was trained on data from 2021 and earlier. Although it can be clever in its guessing, it's still wrong.I would not trust it to write htmx or hyperscript (unless you are willing to spend your time preparing and correcting its mistakes, but at that point you might as well write it yourself)

Merry Christmas folks. I'd like to announce an early release of a project that @gorgeous-airport-54386, @gray-oyster-51537 and I have been working on, a book on hypermedia, htmx and Hyperview. It is not complete, but it is far enough along that I wanted to release it to start getting feedback. You can find the book online here: https://hypermedia.systems We hope to publish it in hard copy, eBook, etc. form next year at some point. This book was initially in contract with a publisher, but they backed out because they felt that the market wasn't big enough. Frustrating, but that gave us the opportunity to rewrite the book in the way that we wanted, rather than catering to the tastes of big tech publishers, and I'm happy with how it is turning out. This is a big reason why I haven't been as responsive as I'd like for htmx and hyperscript issues and conversations, sorry about that! Hope everyone is having a great break, and thank you all for being a part of the htmx community.