Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
Is probably gonna be a short episode because h x confirm is not very complicated. It's an attribute that you just can use to do a standard JavaScript confirmation. So, a good example is on a delete button. When you click delete, if it just deletes and it's gone, that stinks sometimes, and people forget even what they deleted, or they just want to, you know, they want to have some sort of confirmation. Maybe they didn't mean to click delete.
Lazarus:There's a lot of different ways to do this, but this is just kind of a really simple way is to use hx confirm. So hx confirm equals, and then you put in your message. Are you sure you want to do this? For example. Or, you know, would you like to delete record x, you know, whatever your, you can put in some dynamic text there just so that they see it one last time.
Lazarus:They know that what they're doing. If they hit cancel then it doesn't happen. Whatever else is on that element. So, you know, you might have this might be an h x delete and then a URL. If you put h x confirm on it and they hit cancel, it never runs.
Lazarus:If they hit okay, then it will trigger and it will, do the do the HX delete or the hx post or whatever else you have on there even, you know, the hx get. So like I said it doesn't do a lot. The reasons you do this in general it's it's is, for a delete for some sort of major change or something like that it's simple every browser supports it so in that way I think in terms of the UI it's good. People like to be kind of a little have a little check before they continue when they're doing something important. But of course it's not good enough for everyone.
Lazarus:We all have projects and clients that have different expectations. You know, they might say, that looks like a mistake, make it look good, where's the fading in, how come the background doesn't gray out, It needs to blink. The text should be all red. It should swoop in from the side. Where's the branding?
Lazarus:Where's our logo? Where's the colors? How come it's not rounded on the edges? Is that a JavaScript error popping up? Did you break our site?
Lazarus:Well that's fine. You can use this with your customized implementation, of a confirm dialog box. The htmx.org site gives you 2 other ways to integrate either your own confirm box with h x confirm, or to use the h x trigger equals confirmed, and then the on click to trigger a custom confirmation implementation. So the hx trigger equals confirmed. There's different events that you can tap into.
Lazarus:And if you want to just do a regular confirm the way you would with, you know, sweet alert is the one that they give in the in the docs, for HTMLX. If you want to implement that on click and just do your normal thing, you can use the HX trigger equals confirmed. And then because h x triggered, you can put any event, then it will only do that once it's confirmed by your 3rd party sweet alert, whatever that is. So you've got some options. I will include in the show notes for this, the link to the htmx.org page where they talk about the options for implementing your own custom.
Lazarus:But, you know, keeping in mind, maybe you don't need to do a custom. It's nice sometimes to just use the stuff that's built into the browser. Maybe over time the browsers will even make that fancier themselves, and then yours will be all set using that.