https://datatables.net/reference/api/destroy()

but seriously it's pretty easy to do server side sorting - https://github.com/gone/animelister/blob/master/animelister/templates/home/index.html#L16

Hello guys! Is there any way to download a file using django-htmx? I have all my frontend built with htmx but i need to press a button, send a form and download a file. I don't have the option do a get method and get the file from there. I need to do a post method (with the form data) and download the file there. Anything you can suggest will help me a lot! Thanks

downloading a file can't be done via ajax, it needs to be a regular request afaik. I usually generate the download and then issue a client side redirect to that URL to download it

i see. makes sense. thanks for the reply!

Wasn't sure if this actually got posted to this channel yet, such a good resource.

Hello! I'm wondering if anyone could help me debug something with htmx:xhr:loadstart. I have a script loaded at the bottom of my base template that is intended to turn the main window of my app to oppacity 0.1 while loading and back to 1 when finished. The script works great... but only one time. I can't figure out why this is. I will refresh the browser, click something, the app windows dims, but then the second click does not work. Here is the code (sorry, bad formatting) document.body.addEventListener('htmx:xhr:loadstart', function(evt) { const body = document.getElementById('main_content') body.style.opacity = 0.1 }); document.body.addEventListener('htmx:xhr:loadend', function(evt) { const body = document.getElementById('main_content') body.style.opacity = 1.0 }); Thanks in advance!

Also, the script persists after each click, i.e HTMX does not swap in some content that removes the script. It is just as though it "fires" only once and then will not be called again.

Update: actually, writing it out helped. The problem was not that the script was being replaced by HTMX, it was that HTMX was replacing the main_content div. I made sure that all responses returned have the main_content div and that worked like a charm! I will keep my question here in hopes it helps someone else.

Just FYI, if you use triple backticks, then you can get better formatting.

`html
<script>
document.body.addEventListener('htmx:xhr:loadstart', function(evt) {
            const body = document.getElementById('main_content')
            body.style.opacity = 0.1
        });
        document.body.addEventListener('htmx:xhr:loadend', function(evt) {
            const body = document.getElementById('main_content')
            body.style.opacity = 1.0
        });
</script>
`

(it is also apparently really tricky to get triple backticks inside triple backticks)

Didn’t know this, thank you!

Hello everyone, may I ask some question? How can I swap the value of an attribute of an field within an hx-swap-oob in a django template? I'd like to change the placeholder text when the item is added within a form an after clicking the button. The setup works, as outerHTML oob-swap changes the whole input element, but I only want to change the "placeholder" attribute.

You can only change the elements with a response. Your other option would be to put some hyper or Java script in the element that listens for an htmx event: https://htmx.org/headers/hx-trigger/

Thank you for your answer. I'll have a look into hx-trigger. I've found x-ref directive from alpine.js which may help me here as well.

I think the idea would be to have an element with some hyper/script that is listening for the htmx event. Then send an

hx-trigger

header back from the server with that event name (and a payload if needed, as per that link). Then the script runs and updates the attribute.

Was wondering if anyone knew a way to use the lazy load feature on htmx to populate a form element drop down on a page load

hx-trigger="load" hx-get="/path/to/get/options"

on your select?

@tall-dinner-62086 that worked but how do I refresh that specific form elements once the function has run?

uh what function

and what elements

So I used what you said and have the div calling a get function which updates the choice options on the form but currently requires me to refresh the page to see the new changes in the drop down

What changes those options?

Sorry I'm having trouble understanding what you're trying to do here

Yeah it’s confusing I know lol. So basically I have a Django form that one of the fields is populated by an api call, I’ve made it so it runs that api call on the page load using htmx and it successfully gets the new data for the field but it doesn’t update the field on the page unless I trigger a manual refresh

What I want is the htmx to call the function and update the choices like it does and then update the field on the html page without having to manually refresh the page again

Right, so what you want to do is return an html partial from that function with all your options

Should be noted I don't really know anything about django, your question just sounded a lot simpler initially.