Subscribe
Share
Share
Embed
Join me while I learn HTMX and talk at you about it
Twitter: @htmxlabs
So I think one of the more interesting request header, request headers in HTMLX is h x prompt, because it's actually actually has some specific data entered into it that the user has entered. So this is if you've used HX prompt to ask your user a question before they do some action. So it's very similar to HX confirm. If you put it HX confirm equals, and then you put your question, it will pop up a little thing with that question, and then you can do cancel or okay. Right?
Lazarus:That's h x confirm. H x prompt, which we've talked about in the past, that's the attribute. You do the same thing, h x prompt equals, you ask them a question, but this time it's expecting an answer. So there's a, you know, the JavaScript little browser thing is gonna pop up, and it's gonna have a little place to enter something. So, you know, that is something that you can use to basically verify and help the user sort of verify that what they're doing is what they want to be doing.
Lazarus:So you've asked them a little question, you they've provided some text, so a little text input will pop up. It's a native browser thing. You fill it in. You click okay. So what happens to that text that you just typed in?
Lazarus:So in h x confirm, once you click okay, then it sends the h t m x request. K. In h x prompt, it sends the request once they click okay, but it also puts the little text that they typed in into the HX prompt request header. So that makes sense. So the use case you've probably come across this is on a delete.
Lazarus:You know, they may ask you something, a little question to prove that you're serious about deleting this. You're serious about considering this action, whatever it is you're doing. Also just for, like, basic sanity checks to make sure the user is paying attention. So your server can then check that header, the h x prompt header, and see if it's what you expect. So you could ask a little question like, you know, what language does JS stand for and they type JavaScript?
Lazarus:Like that's or vice versa. You know, what's the abbreviation for JavaScript? JS? I don't know. Something like that where it's just basically to prove that they're human, they're paying attention, and, you know, you just want to kind of give a little extra thing.
Lazarus:So that h x prompt header can be checked by the server. You can use it to capture data too, so if you wanted to actually have some meaningful information there you could do that. Probably that's, you know, not necessarily something I, like, standard way to do it. Maybe wouldn't recommend it. Usually you just have a regular input field for that.
Lazarus:So, you know, you can just do an input text area, but you can use that for h x prompt as well. If you ask them some question and you want to store that information along with their response, that would work too. So it's it's more like one step above from a con from a confirm, so an h x confirm. That one you just click a button, this one you click a button, and you type something in. So it lets you back out, lets your user back out or cancel before the request is sent.
Lazarus:So h x prompt also lets your server back out and cancel if the user isn't paying attention. So if they didn't answer that question right, if they didn't put in the info that they need to put into that little text area, your server now has access to it through the h x prompt request header. It also could just give you a little context with their request. So if you want to set it up that way, you know, maybe that's something that saved, like, I don't know. What's your reason for deleting this?
Lazarus:You could you could ask them that question and have them type something, and then you save them in the database, and maybe that's interesting. I don't know why I wouldn't I've never done that. So, that's something you could do though. So I am actually building a a site right now that where you can sort of try these out, because I think it's hard to sometimes visualize like request headers and buttons and attributes and this stuff working together, you know, in an audio format. It's like, I think, at least when I'm learning stuff, it just it really helps to see some examples.
Lazarus:So I'm gonna get a few more of them done before I I launched that site. But this is, I just worked on this one on that site. So the h x prompt request header. It's worth seeing these headers in action to get a feel for how you'd actually, you know, use them. An HX prompt is a nice sort of user experience.
Lazarus:It's built into the browser, so it feels kind of official, gives you the info you need on the server to make sure your users are doing what they mean to be doing, because, you know, if they get it wrong, who do they blame? You know, do they blame themselves if they deleted something they weren't supposed to? No. So, you know, we know they don't blame themselves. They blame the website, they blame you, the hard working developer, or me.
Lazarus:And our job as developers, as these people building these full stack sites, is to give them fewer, these users, fewer and fewer places to make mistakes. So I think of HX prompt, the request header. It lets them check, you know, h x prompt itself lets them check their own work with the pop up. You know, they can make sure, okay, do I really want to do this? I have to click okay again just to send this request in.
Lazarus:Then it lets us check their work with the data that's in the request header in the HX prompt. Did they understand what they're doing? Okay. We'll check this value. Looks good.
Lazarus:A 100%. You can even put that into, like, a middleware or something like that. Make sure that that's the same. So you've got some options. That's h x prompt.
Lazarus:I think it's a very useful request header to have.