Dispatch browser & Emit events | Edit component | Laravel Livewire CRUD

hi everyone clash of walla doing well so what we're going to do in this episode is we're going to be working with events all right so we're going to receive the event in order to display basically our sweet alert component right here and to refresh our index parent component of our edit component right here so as you can see if we press the edit button right now let's quickly click it right so let's update php just to add t or td okay so let's quickly press update now as you can see the pattern component is not updating the new data so it's basically our index view is not displaying the td until we refresh the page right here all right so instead of doing a hard refresh like that we just want the index component to basically refresh so we're going to send an event to this index component to the refresh as soon as the child component added is updated all right so that's another one so that's the first event the second one is we're gonna actually work with our suite alert right there okay let's start off with the first one all right so let's quickly open our two components under app http livewire under tags you will see we have our index one so this one will receive the basically this emit event that we're gonna file off in our edit one right here okay so that's the first thing all right so when we update the component we want to emit an event so we're gonna say this emit okay so we want to emit what event you can name this whatever you want i'm just going to call this one saved event all right so let's quickly do that now in our index one this is the one that we want to refresh with the new data so we're just going to do a protected listeners all right and then we just do protected listeners and then we're gonna listen for that saved event right so when we receive that saved event we're just going to refresh this component so let's say refresh like this all right and let's save that okay let's quickly see when we update the component it emits this event and then it's going to refresh this component with the new data just before we do that this mustn't be a comma it needs to be an error it kind of when we see this it needs to do this so that i just instead of a comma just make sure you have that in there right so let's quickly check this out right so if i delete the td and i press an update you can see it updates the index right there it removes it and it updates it with a new data right so that's the first part now the next part is we need to work and receive our speed alert right here okay so let's do that right so like i explained in the previous episode there's two ways we can actually dispatch an event to actually display a sweet alert post a message right now let's start off with the first one this one is going to be to dispatch a browser event okay so it's just going to say dispatch in a browser event now what we're going to do we're going to call this one updated right so that is the name of the event all right so the second part right here is the title so the title would be that we're gonna say what will be the message be so the message will be tag updated okay so you can call this whatever you want now the next part is the icon like i explained when we installed sweden the icon can be success a warning or question or whatever the case might be in my case i'm just going to make that a success okay now this part right here is the icon color and we're gonna set that to be a green color okay so just like this all right for those that might be new the icon that i just wanted to show you the success if a little tick right there and error have this warning of an exclamation info that and a question this so you can obviously decide however you want to do this i will leave a link in the description for you guys to go and click to go and read more about this all right so this is the first part of our dispatch all right so now we need to listen for that and we're not going to listen in the component we're going gonna actually go to the view right here and the previous episode we add push the scripts basically to our layout so under layout guest layout we receive it under stack scripts right here now we need to basically listen for that event right so now we need to create do some javascript for those that might not understand javascript please bear with me right here but this is how you're going to do that all right so on so between your two your push script tags right there what we're going to do is we're going to create a script like this right so what that allows us to do to put vanilla javascript between these tags okay so what we want to do now is on window all right what we want to do on the windows we want to add an event listener okay so event listener okay let me just make sure i spell it right all right so what we want to listen for we want to listen for that updated event right so let me just quickly go in here so i'm firing off this event i'm dispatching this event to the basically to listen to right so the update if you named it something else like joe's soap or whatever the case might be just make sure that you this name right here you spell it the same otherwise it's not going to work right so the next thing is we're going to create a method a function and we're going to pass the event parameter right there okay so let me just put it in here another thing is we're going to get that swell all right swell dot fire this is the sweet alert right here and we just want to fire off that event okay and then we just want to do this okay now the first part right here the title we're just going to get the title and that's going to equal to the event and then we just want to get the detail title all right so the detail is just as parameter that we're passing through but the one that we receive right here we're gonna get the detail we're gonna get the title right there okay so the detail title the next thing is we want to get the icon all right so the icon is going to e dot detail dot icon right the next one is obviously the icon color so let's just do that so icon color and that is going to equal to e dot detail all right the next thing that we want to do we need to add in the timer okay the timer you can decide however long you want to do this i'm just going to make this one almost 30 minutes three minutes no three minutes thirty thousand milliseconds it's 30 minutes so i'm just going to make it three minutes i just want the timer to go as basically as long as possible so that you guys can easily see it the next one is the toast all right so if you set this to false okay now what will happen it will display a big toaster instead of a small little one at the corner right there but we're just going to set this one to two i'll just want a little one the next one right here this will be for the position where do you want to position this and now what i will do is i will leave a link in the description for you guys to obviously go and read the documentation but now i'm just going to add mine top right like that okay so that's the position i wanted to be in the next one is i just wanted a time timer progress bar so timer or place and bar and i'm just going to set that to 2 and the last one right here this will be show confirmation button so corn firm button and i'm just going to set that to false i don't want the confirmation button so i'm just going to set it to false and just like this right so that's the first part so that's how we can dispatch an event let's see if this work all right so i'm just going to add double d's triple these all right so as you guys can see i've got a little message right there tag updated and that will stay a while like that because i'm saying for three minutes but obviously by default you will change it to be only three seconds so i'm just going to delete this these again so let me just remove that right so as you can see dag updated right there awesome stuff all right so this is the one way to do it obviously with the browser okay now let me just comment this one out actually just cut it out the next way to do it is obviously with the emitter event so i'm just going to copy this out so let me just the next one is if we dispatch emit event all right and we're going to call this one update did as well and i just want to pass in the same parameters to that component so let me just do the event so let me just copy this and paste it in here all right now the difference will be now we will have we still use the same script text okay just like that but now what we do is we say livewire dot on okay so on what on the updated event okay then run a function and we're just going to pass in the same thing an event parameter okay and then we're just going to say swell speed alert basically swal dot fire so if anyone is new and wonder where i get this wall from so if we go to our resources js app.js you can see i'm referring to this wall right here this one okay so let's go back swallow.fire let me just want to fire off this now the thing is we're not going to do it the same way let me just actually put this on top right there just cut this out quickly right so this is the browser one i just changed it back to three seconds top right everything is so true like that okay now the thing is this one is for the emit event this one that we're listening to not the browser event okay now in here here we're using the detail right there this one we're just going to do e dot title okay so let's just put quickly in the title i'm just going to do the first one and then we're just going to be e titled just like that okay all right and then you can have the same parameters that you would normally have for that in here okay so instead of the e detail title we just add e title e icon and stuff like that okay so if you change this to be an event let's say you wanted the full name just make sure you put event back here okay so event event etc all right so that's an end of this episode so let's just make sure this work actually before we do that let's just cut this out before we do that let's just make this work as well right so the event parameter everything is good make sure i put the name right so updated and as i put back updated let's just make it updated all right so just on updated just make sure that we display that alright so let's quickly click this button and quickly see if we can just put new in here and press update and hopefully it works now as you can see tag updated right there with the timer and it disappears all right thank you guys for watching if you like the video please give it a like if you have any questions feedback or suggestions please leave it with me in the comment section and with regard to the suggestions i do read them i do make a list and if we might get to them we might get to them if not we just make another series for that as well alright thank you guys see you in the next one please like the video and see you there adios

Channel: AngelJay Academy

Views: 304

Keywords:

Id: F5Rc7c7dX18

Length: 13min 0sec (780 seconds)

Published: Mon Nov 22 2021