remove it from the DOM?

oh, that's a good question

so, I have the cancel button - clicking it brings me back to a list of all 'projects' - that's what I just called 'close'

What you could do is use an HX-Trigger response header to trigger that form's cancel button at the same time you fetch a new form

Did we ever get an htmx playground or is it just hyperscript?

There's the demo script

Sound like what I need, trying to figure out how to do that

the demo script uses a fake xhr, it might not work as expected

Does it fake headers?

no, doesn't handle headers

unfortunately 😑

welp, can't give you a demo but essentially you add an

hx-trigger

attribute to your form's cancel button and return the same event as the value of your HX-Trigger header. For example, ``

can I have more than one triggers for one element as I already have an important one out there?

Yeah you can have as many as you want

I'm going to come back to this in few hours. @tall-dinner-62086 thank you very much!

No worries. Feel free to ping me back if you need to. I don't always monitor this server

@mysterious-toddler-20573 thank you very much as well!

I have a modal with some content generated via htmx. There is a script Inside this content (vanilla js) for dealing with that content. When i first load the modal everything works but when I load the modal a second time I get an error about the variables (declared with let) in that script that are already declared. Is there a way to reset them on htmx.load or a better place to load that script and solve my problem?

I solved my problem declaring variables using var instead of let.. I'm not very experienced in JS so I'm happy my problem is gone but maybe there's a better way to solve this

FWIW, I've run into that when I try to define a variable that has all my code in it; the back button would give me a JavaScript error, which would short-circuit the process that htmx would use to restore the snapshot. My solution was to assign the variable to

this

, which is the browser when you're looking at something there. Some linters complain about a top-level

this

statement, but you could also use

window

to get around that; your redefinition would replace what's there, instead of failing because it's already defined. Your fix to use

var

is very similar, placing it in a global scope where it can shadow what's already there.

curious if there any login examples created with htmx, or is htmx not suitable for it due to security reasons?

htmx should use "normal" (read: cookie session based) authentication, as found in nearly every server side web framework circa 2010. You can use htmx for the actual login form, if you like, but it isn't a requirement. Once you have established a session identity using your back end of choice, it should all work normally.

well since I've converted every interaction to htmx, I'll give login a try. Thanks @mysterious-toddler-20573

@tall-dinner-62086 Looks I still need help with my issue. Here's what I ended up with after our last dialog. Is that a correct way to implement your advice? Something has to be changed here cause it doesn't work. has that 'cancel' functionality.

hx-headers adds request headers, while HX-Trigger is supposed to be a response header sent from the server. If you want to dispatch an event from a button, you can use JS:

onclick="document.body.dispatchEvent(new CustomEvent('myEvent'))"

or JS with the htmx utility functions:

onclick="htmx.trigger('body', 'myEvent')"

or _hyperscript:

_="on click send myEvent to the body"

@gorgeous-airport-54386 thank you, now the code works but it's not doing what I am looking for since the logic is wrong in a first place. I'm trying to have only one instance of #project hx-get be activated at a time. For now I can activate multiple for each of the 'projects' in a 'for loop'. I added your code to a #project and clicking it does hx-get and the span hx-get at the same. Like opening and closing in a single moment.

I think you can use hx-sync (https://htmx.org/attributes/hx-sync/) for this. If I click the project, then another project while the first one is still loading, what should happen? Should it do nothing, cancel the first request and do the second, or something else?

Yeah, cancel. Canceling here is exactly hx-get="{% url 'projects' user.username %}" from the span tag and it should be done before calling another hx-get="{% url 'project-update' user.username project.pk %}" from #project

Add an id to some element that won't change, then add`hx-sync="#id-of-that-element:replace"` to the project divs and the span.