Laravel Livewire Tutorial: Adding Modal, Event Listeners, & Delete (part 3)

[Music] hi i'm billy and welcome to jack of traits if you're new here you can watch the previous videos where we learn how to set up laravel with livewire and learn how to implement the create read and pagination in this video we will add a bit of enhancement to our user interface using one modal bootstrap component to wrap our form elements we will also add a delete functionality at the end of this video and we will also learn how to add event listeners to both the back end and the front end so that you will know how to trigger a back-end code to run every time a specific event happens in the front end and you will also learn how to run a front-end javascript code by triggering it from the back end and without further ado let's get into it now that we separated the form elements into a child component it's a bit cleaner in the user interface if we make the form elements pop up every time we click an add or update button we will add those in a bit in the modal bootstrap component and wrap our form elements inside but before we do that you will notice that every time i add a post the post doesn't update the table list that is because we isolated the form to another component which became a child component of our livewire post component to solve that we will add another feature in livewire which is called the event listeners let's go to the parent component which is the post class file and let's add another class variable which we will name listeners and set it to access modifier protected let's declare it as an array and put the name of the function we will call this refresh parent in the key in livewire there is this magic keyword called refresh which the only thing it does is refresh the livewire component [Music] but to further demonstrate to you let's instead remove that and add an actual function in this class that has the same as the one we declared above which in our case we will name refresh parent [Music] every time this refresh parent listener is triggered or called wherever you may be in your child component the code inside this function will be executed let's add another variable called prompt for this event listener demonstration and see what happens next let's set a text to this public variable prompt so that every time this function is triggered the text will be assigned to this variable we will also echo this out in the front end later on [Music] now it is set up let's trigger this function in our child component the post form type in this emit and the function name and then the parameters which in our case the refresh parent in our case we will omit this event every time we save our post in this example then let's reload the page and try this out as you can see every time there is an event that is happening inside our child class component we can quickly run specific code outside via the event listeners livewire allows us to do just that it is a powerful concept that livewire uses to trigger events from the front end to the back end back and forth now putting that aside let's simplify our code to refresh the parent component every time we add a post [Music] now that we have our post list back to how it's supposed to behave let's proceed and add the modal to wrap our form elements so that it's going to look good and easier usability wise let's go to the getbootstrap.com and copy the modal example implementation there and add it to our code [Music] let's paste the livewire component inside the modal bootstrap element and see it in action [Music] [Music] now that we added our modal component we will encounter a bit of a problem here when you click save livewire makes a round trip to the server back to the front end every time a livewire class property or public variable is updated so when that happens it reloads a part of the page where the modal's visibility is primarily set back to hide by default to solve this issue we need to add a javascript function to close this modal component and it will be triggered after we save a post and ultimately add a back end code to trigger that event listener which resides in the front end we call that an event listener in javascript fortunately livewire allows us to achieve those things we can actually call a javascript function in the back end with livewire so let's do that in livewire there is a built-in function called dispatch browser event it is used to run a javascript event listener by calling the javascript event listener from the back end we can actually execute a javascript code with php let's implement this livewire feature let us add a dispatch browser event that calls a close mobile event listener from the front-end javascript code [Music] we will call this event listener every time we save a post [Music] let's open up the app.blade.php and add these javascript event listeners to handle the show and hide feature for our modal component we will call these event listeners from the backend [Music] [Music] [Music] [Music] now that we added the dispatch browser event implementation let's try it out [Music] as you can see we closed the modal successfully by calling out a javascript event listener from the back end livewire allows you to implement this concept right out of the box quickly notably we achieved it with lesser code now that we had a better understanding of how livewire triggers events from the backend to the front end and vice versa let's add the delete functionality for the last part of this video [Music] [Music] [Music] [Music] [Music] [Music] i hope you have learned some practical techniques today in the next video we will be adding a prompt every time we delete a post instead of getting it removed directly we will also learn how to implement and reuse the form element that we just made and use to create our post when we tackle the update functionality so stick around because we're almost finished with this little laravel livewire series so if you enjoyed this video give it a thumbs up please hit subscribe if you are new to this channel and you can also get notified by clicking the notification bell whenever a new video is up so stay tuned and see you in the next video

Channel: Jack of Traits

Views: 20,740

Keywords: laravel livewire tutorial, livewire tutorial, adding modal livewire, laravel livewire, laravel livewire basics, laravel tutorial for beginners, laravel livewire for beginners, modal livewire, event listeners livewire

Id: _DQi8TyA9hI

Length: 11min 19sec (679 seconds)

Published: Tue Aug 25 2020