Alright, here's the next little JavaScript bit for you. I actually added one of the things we're gonna use here. I added today because I was recording these these episodes and realized this would be really useful in Livewire so I added it. So let's get into it. Here's the problem statement. If you have content in an editor like this and you might type something really valuable, like the best post you've ever written, and then you accidentally hit command R and refresh the page

like the best post you've ever written, and then you accidentally hit command R and refresh the page or go to Google and you didn't mean to or click a navigation link, you didn't expect to take you somewhere else and you just lost all that content. There's plenty of things you could do in Livewire right now to prevent this and some pretty clever ones like wire model Live and save, you know, all your changes, save the content in the backend in a database

Live and save, you know, all your changes, save the content in the backend in a database for your users and whatever. There's a million things you could do, but I think the simplest thing we could do right now is throw one of those browser alerts that says, Hey, you might have unsa unsaved changes. Do you really wanna navigate away from the page? And we're gonna do that, but we're gonna do it conditionally with some fun stuff.

And we're gonna do that, but we're gonna do it conditionally with some fun stuff. So let's do it. So the first thing inside the script tag where we're auto resizing that text area, I'm gonna use a little snippet I have that adds an event listener for before unload. So this is a browser thing you can hook into an event so that before the page goes away you have an opportunity to execute some JavaScript. And sometimes this is abused for like spammy apps,

to execute some JavaScript. And sometimes this is abused for like spammy apps, but I think that it's totally fine and noble to detect that your users have unsafe changes and tell them about them. It can be really helpful. So, uh, the way that it works is you listen for before unload and then you call these two kind of obscure things prevent default and then return value empty.

of obscure things prevent default and then return value empty. I'm gonna save this and you're just gonna see that it's gonna apply all the time right now. So watch this. If I refresh the page, it won't let me refresh. It says changes you made may not be saved. Cancel or reload. So that's basically what we want to trigger is these two things conditionally, if they have unsaved changes.

is these two things conditionally, if they have unsaved changes. So that's the fun part is how do we know stop it, how do we know that they have unsaved changes inside this text area? Well, live wire already has a system to detect dirty data, dirty states basically meaning any data that exists like in wire model, but that hasn't been sent to the backend at all yet. 'cause wire model doesn't trigger requests

but that hasn't been sent to the backend at all yet. 'cause wire model doesn't trigger requests as you type like wire model live does. But without that it doesn't. So you may wanna know, hey, did some of this model data change that we haven't sent to the backend? And we can hook into that in some clever ways. So this has been available in live wire since maybe even version two.

So this has been available in live wire since maybe even version two. Wire dirty class text red 500 and we'll add important there 'cause we need that. And then now, yes, I wanna reload the page. Um, now when I type into here, it turns all the text red because the value of content has diverged from what we know the server thinks the value of content is. Okay. And then the, the really nice thing about it is when I go back,

Okay. And then the, the really nice thing about it is when I go back, it disappears as soon as anytime the data matches back up with what's last known on the server, it's gonna disappear. So this is great and useful and available in Livewire, but we need it down here in JavaScript and there was no way to do this. So I added this little bit today. So you can say if this dot dirty and you can just call dirty and this will tell you if any data in the component is dirty

So you can say if this dot dirty and you can just call dirty and this will tell you if any data in the component is dirty or you can target it to multiple or one properties. In this case we'll do one property, we'll say content. So I wanna say if content data is dirty, then I want you to call these things, but otherwise I don't want you to call them. Okay? So let's see if this worked. Save it refresh. I'm gonna hit, uh, yeah, let's do this. I'm just gonna refresh right now

I'm gonna hit, uh, yeah, let's do this. I'm just gonna refresh right now and you'll see that it works fine. Okay? But as soon as I type anything into I'm, I'm gonna type one character h now I hit refresh and it says, Hey, you actually have unsafe changes. Are you sure you wanna reload? Sure, I do wanna reload or I don't, I canceled it. So that's dirty. Really nice little handy feature. I mean, I could think of all sorts of ways to use this.

So that's dirty. Really nice little handy feature. I mean, I could think of all sorts of ways to use this. Like what if we did a span tag that says, I don't know this, you wouldn't do this, but unsaved changes. And then again, you could do the old wire dirty thing or what if you combined new stuff like wire show dirty, you could straight up say wire show dirty. And now as you type, that thing is gonna show up or you could scope it to content and then that's gonna show up.

or you could scope it to content and then that's gonna show up. Or maybe you have a click listener that only executes if something isn't dirty or whatever. I don't know. The possibilities are endless. That's dirty. Uh, let's dig into some meteor beefier JavaScript stuff. I'm really excited. I'll see you in the next episode.