Building a modal, PART 2
Okay. So this episode is gonna be a bit of an addendum to a bonus episode I did, last week, which was about building a modal in h t m x. And the reason I think a second episode is necessary is because, really, it's like the other one was a little too simplistic. That was like if you are doing a full page reload, and that's how you get to the screen that has the modal. So I'll just say that the way I laid it out last time is you can use, you know, go find your favorite modal technology.
Lazarus:So Bootstrap, Alpine, you know, whatever component library you have. Usually it's like a JavaScript, a front end kind of component set that'll have a modal as an option. So my advice or sort of, you know, was to go find whichever you want to use, and if you want to incorporate HTMLX with it, you just set it up as an empty shell. Right? So you set it up as an empty shell, make sure the button works, you click the button, it opens the thing, And let's say you have a list of, like, you know, 200 items in a list, and they all have an edit option which pops up a modal.
Lazarus:So you use the same modal for all of them. They all have the same target, that they open to. Any of those buttons on the list. So first you set it up so that all works, and you just use, you know, whatever your modal, component, whatever your tech is, alpine, view, I don't know. Whatever you're using for modals.
Lazarus:And then the HTMLX part, on the button, you load the specific inside part of the content of that modal, including all the buttons you need. So everything that's inside the modal, you load that on mouse enter. So that when they mouse over the button it's loading that modal behind the scenes, and then they click the button and everything's there, and it's nice, and it's working. That's all fine. Right?
Lazarus:So so that I think is fair, but the reason a second episode and the second, you know, I I feel like it was a little bit of a disservice to make it seem that simple. Because even though that works, and that's good, that makes an assumption that to start the page, you're doing a refresh, or you're clicking and it's loading everything fresh. However, if you're using HTMLX for a lot of stuff, that might not be the case. You might have loaded those modals as partials, you know, partial HTML that was loaded to part of the site because that's just a standard pattern. And so if you're trying to do that and listen to the episode and follow that advice or, you know, follow that pattern, it's not gonna work if you are loading these JavaScript, front end components for modals as part of your HTMLX separately on the page, because if you don't initialize them and reinitialize them and make sure that the JavaScript runs so usually the JavaScript runs, you know, on page load.
Lazarus:It's gonna go and it's gonna make sure all your models are functioning, and and it does like, you know, some sort of selector to say, okay, initialize this so that the click the click action works and all this kind of stuff. So if you tried to do it with alpine, and let's say you loaded that list and you have a list of items, and you're using some sort of filtering up at the top to decide, okay, you know, there's 500 items in this list. I'm gonna filter it by, name or I'm gonna sort it or something. So you're loading you're using HTMLX to load some partial part of the page. So by default, your modal is not going to work because it needs, if you're using one of these JavaScript ones, it needs to initialize that modal.
Lazarus:It needs to run something to make that modal work, whether it's like alpine init or, you know, I keep using that because that's generally what I use for this stuff. But, whatever it is. Bootstrap, I wish I could think of the other ones right now. But whatever you're using, it all needs to run some sort of init after this. So this is standard.
Lazarus:If you're using 3rd party JavaScript stuff in a and HTMLX, you have already probably sorted that out. And the general solution to that is that you set up in your JavaScript, you tap into those HTMX events. And so, you know, HTMLX after request or after settle, you can set up a just a line of code that you put in your primary, page that loads on every page that says after you an HTMLX load, and and after the DOM is settled and after you put it in to run whatever initializations of third party JavaScript things you want to do. And that should work fine. So that's one option is to do that, to to make sure that that is running, so that if you load the modal buttons separately, or the underlying modal, or whatever it is, if you load those separately through loading partial HTML they will still function.
Lazarus:So that's a big thing to think about. You always have to remember that's one of those gotcha because if you forget to do that, it's like, oh, your buttons just don't work. Your JavaScript just doesn't work, and that's frustrating. So that's the primary fix, but let me tell you about another fix, an even better fix. And it's sort of, you know, I credit, Anthony Alaribe who was on, who who gave who spoke at Big Sky Devcon and, who was was kind enough to be a guest on this podcast, and talked about, the stuff he's building with HTMLX, but one of his big things is the browser actually has a bunch of tools.
Lazarus:The browser and HTML and, you know, the browsers are getting better, the tools are getting better, HTML is getting better. You don't necessarily need to open up a new comp you know, to go and find a JavaScript library to do certain things, and modal is one of those things. In HTML, there is the dialogue option. And with some very, you know, if you just add dialogue, it's going to work as a modal, and you do not need to worry about initialization. You can load it using h tmx as a partial, and that dialog is going to work exactly the way it should because it's built into the browser.
Lazarus:So how nice is that? But by default it looks kind of, you know, average. Like it I mean, it's not even average. It's like, it's just like the background grays a little bit, and your modal is immediately there. That's fine, for some things, and for some people, for some projects, for some setups, but the reason you've probably re reached for, you know, one of those other JavaScript libraries to build a model is that they look nice and they, like, pop in and they they fade and, you know, they they do some other stuff that users are kind of used to with modals.
Lazarus:Right? So can you do that with the dialog HTML tag? Yes. You can. And it is very easy.
Lazarus:So you just, you know, some you you can just style any part of it. There's plenty of examples online. It uses just CSS, and you can use the, like, translate. You know, you can use these, just CSS transitions to go from the open state to the closed state. So you set up in CSS, you set up your open state, and you set up your closed state, and I'll include a link to an example of this.
Lazarus:But it's great, and you don't need to then worry about these 3rd party initializations. And so this is a pattern I'm reaching for more and more, because this is not going anywhere either. You know, if you're if bootstrap, for example, completely changes, which it already did, you know, all my old Bootstrap models, the way they work is long gone. If you try to go and get new Bootstrap, it's gonna be totally different code, or your old stuff's not gonna work. It's all changing changing changing.
Lazarus:Everything's changing. Everything moves fast. But dialogue is not gonna change. CSS is not gonna change. And the only direction it changes is adding more features, and this is the direction that CSS and HTML are going.
Lazarus:They're adding more and more, and the browsers, they're all adding more and more supported features to make your apps look and feel, very nice for the user. So I would recommend trying out the dialogue, seeing if it works for you. If it doesn't work for you, then just keep in mind that, you know, building a modal is, you know, relatively easy and, you know, especially using HTMLX. This is a great pattern, extremely efficient. You just load things into the model as you need them.
Lazarus:Your users are never even gonna know about it because, you know, that it's getting loaded at the moment at the time because it's happening behind the scenes. When you hover over the button, it's gonna be fast. You're just loading a little snippet. You know, obviously, you you can load whatever you want to this model, so you could make it slow if you want to, but it's probably gonna be very fast. They're never gonna see any blip, but you can put a little loading thing there if you want to.
Lazarus:So I would check out the dialog, and I may try and post, like, a little, you know, snippet of the way I ended up the way mine ended up looking, because actually I think it was I think it came out nice. I was very happy with it, and I'll just say part of the reason for this is I rebuilt an entire section of the site that was sort of very, you know, I got rid of, I don't know, 450 lines of JavaScript. I had a file, a JavaScript file that I was using for this whole section. I just deleted the file. Step 1.
Lazarus:Just delete the file. So it breaks the whole section of the site, right? And then I just started refilling all those functionality using HTMLX, and, you know, got the project done in probably 6 or 8 hours, and rebuilt this whole section, used the dialog, as my modal, filled it using the pattern I'm talking about here, so there's only 1 dialog box for each item, and then there's only one dialog box, and then each item loads in the data it needs for that dialog, for that modal, so that you can, you know, just kind of load what you need at the time. Very fast, very efficient, and it's been very, you know, it's all it's only been released for a couple days, but, I mean, no bugs yet. No errors.
Lazarus:It's just it was very straightforward. Now when I look at the code, I know what's happening, So very good experience, and I am leaning into the browser and HTML, and, you know, along with that, HTMLX, because they all sort of play nice together, and you don't need to worry so much about initializing and, NPM and all these other things. So, anyway, enjoy Buildamodel. Peace.
