Creating Reusable select2 Component Using Laravel, Livewire and JQuery

all right friends welcome back to another video on building multi-purpose laravel in liver application in this video i'm gonna show you how we can create reusable selective component using laravel livewear and jquery but before we start let me give you the benefits of creating reusable components by creating the reusable components the main benefits are it saves lots of our time and the second reason is it is easy to use so let me show you that what if we need this selective component somewhere here in our applications like with another field we can do that let me show you using components we can simply do we already have this component class selector so let me copy this and then let me paste it over here you can simply change this value to let's say others and id to others as well and if i refresh the base and it is already working over here see how easy it is to use and if we create a new appointment let me create that okay and we are passing different values over here we select time and date and click on save and we have these values others have one item and then members have three items right members have three items and others have one items and if i refresh the base and we can change those placeholders as well we can change this level as well for changing placeholders we can simply do place older other options right by chance that it got changed over here as well and what if we need to use this same component in other area of applications like what if we need to use this selective component in our profile phase so let's do that how it will look so let me go to profile page complete psp file and over here we can simply copy this and over here we can change this level and for input will be using the component right so let me go back copy this one and paste it over here and we can change this as well but let me keep that and refresh the page and if i come over here and it is already working see how easy this is and how time saving this is and on the previous video we spent almost around 15 minutes to build this functionality right but after creating the components it's easy to use everywhere in our applications and here we don't have to worry about selective setup and then select to initializations it is just simply working see how cool this is so let's get started building such components okay first of all let's create a component file which is inside of resources views components let's create another folder called inputs inputs and inside of this folder let's create another file for select to apply okay and inside this file is going to be let's display here and let's go to create appointment from the psp file and let me go over here and let me copy this part paste it over here and instead of this one will be using the components and to use the component we can simply do x and the name of the folder is inputs dot the file name is select two and then we can close this okay and if i refresh the page and you will see it is displayed over here right so first of all let me remove everything from here right and let me move it to select two and then paste it over here okay now let me go back to create a point dependent form and let me refresh the page and you see that input right but it will not actually work let me show you we'll go to create appointment form component class and over here let's do diagram this state okay we'll press it you can select this one this one select that time and save it we save and here we got the one attributes called members and with these items right and if we go to create appointment form uh we are just using the same one right we need to make this pre-visible so that we can reuse in multiple places with multiple options with different options right so let me go back to selective [Music] and over here will not be using the options in our component because we'll be passing while using the components right so for that we can receive those options using slot now let me go to create appointment form and instead of here we can simply pass these options right now let me place this one now if i go back over here and you we see that options right okay and let me go to the top and we need to change this placeholder as well because we don't want to see like selected states right so we need to pass that placeholder from here let's make that possible so let's do place order equals to let's say select options right if i go back we don't see that placements right so let's fix that let me go to component and over here we are just writing select a state so instead of writing that let's make this dynamic so we'll be receiving the props as placeholder and by default let's make this a select options right and then over here we can use that placeholder variable is in place folder now if i refresh the page you will see that different options different places right but this is the default place already select options we can sense that when passing that placeholder let's say select these options then we will get select these options but if we do not pass place alert actually then we will see select options as default right which is fine now the another step is to initialize select two on this select element currently we are using glass called selective and on the bottom we are initializing that right with this code so let me cut this code from here and then we go up to select two component and let me paste that and we can post this script to the tab to the stack called js right and then now let me refresh it and it is just fine okay fine but here we are using class it's like two and it will not work for multiple uh select two on the same place because we are using the same class name and we are initializing this with on the same class name right so instead of using class let's use id so do id and let's receive the ids props using id over here and we don't need to pass the default value and over here we can use that id using id and for selecting the id we need to do hash and then id right and if i refresh the page it will not work because it is undefined variable id so we need to pass that id from our component right by using that component so let me go to the top over here while using the component you need to pass id let's pass this is others and okay fine let me refresh it and it is not giving the year but here this is not working because we remove that javascript code to our component so let's make this as a component right for that let me copy this one and then paste it over here let's get it this is called members right here we see the select options so you need to select options let's do select members here we can pass the placeholders props so let's do placeholder calls to select members okay now we see it we select these items it will not work let me use the date time click on save and we still see members right so let's fix this as well so let me go back to select two components we see members because over here we are setting the state dot members only we need to make this dynamic as well so how we can make this dynamic to make this dynamic let's go back to create appointment form and let's pass wire model from here let's do wire model and then state numbers let me go back to the component attributes you will get every attributes like wire model and if i pass another attributes like click here and we will get those attributes right so uh let me go back over here and to get the attributes value like we need to get state dot members over here right so to get that attributes we can simply do attributes where starts with wire model right now let me refresh the page and you get that value wire model and we need to get this value so to get that value we can simply call the first method over here so let me refresh it and we get the valuable state the numbers which is perfect and we can use that code let me copy this over here right now let me delete this okay fine but this is not working so let's fix that let's go to create equipment form and over here let's do wire model use stated colors let me refresh it and it is still not working let me inspect it and see on console and it is giving syntax error so let me go back to selecting and over here we need to wrap this with curly braces right if we refresh it and it is fixed so now we can select this this one and let's use the client that time click on save and we got these members and others as well with different items right and it is working perfectly fine but still we have issue so let me show you that uh if we go to profile page and if i click on the paste source we see that here we have selective as well because if we don't need on those spaces then we don't need select as well right so let's fix that as well and if i if i view paste source on this index page as well we see this and then we see related to javascript here right so to fix that let me go to app.blend.psp file and over here we are using selecting for javascript let me remove it from here and go back to the component and we can push this from here let me do the same for css as well for css let me go to the top and let me remove this from here and go to the component and we can post to the stack called style spread let me go back and let me get this tag over here okay fine so let me save this and then let me refresh this space let me refresh this page as well and if i search for select two then we don't see that selecting because we are not using that component right which is perfect and then if we go to profile pages file we are not using slack over here as well and we don't see stack2 here as well which is perfect let me show you another issue or let me go to a new appointments and over here let me do source and let me do search for select to okay so over here we are using select two two times we don't need to do that right we just need to make this available only once so to fix this issue there is a directory call once so that we can push to that stack only once right this is getting duplicated because here we are using that component two times and while using the components we are pushing uh these styles to the stack and every time we clear the components we are just pushing it so we don't want to do that we just want to push this once so there is a directive called once and you can end once okay so if we do this and then let me refresh the page and it got pushed only once which is perfect so let me go back it move the same for javascript as well but here we just want to push this one only once but for initialization we want to initialize every time the component is created so let's do that we want to first only once and once let me paste this and then push to the stack of javascript and end plus let me remove this from here and let me put this on a single line okay fine so so first of all let me show you over here let me go to the bottom and previously here we are using this two times but if i refresh the page and we see this only once okay but for initialization we need to initialize this twice which is fine so let me refresh it let me try one more time with these options but it is saying that property dollar not found right so we need to fix this as well so let me go to the component and over here here because of indentations got missed so let me save this and then try one more time yes it is working select that time click on save and everything is working perfectly fine so finally what if we want to use this component not profile right over here so let me show you how easy it is so to do that let me go to update profile uploaded psp file so let me copy this paste it and let me remove this for now and we can simply use that component for that let me copy it from here and paste it over here and then it is already added over here right and this is currently saying that property state not found because we haven't created this property so to show you let me clear that property we go to update profile public state as empty area we refresh it and let me select this one and we see this beer issue so let's fix that as well because here we were not using wire ignore so instead of using wire ignore over here why not get that on our component itself so let's do that let me go to selector and go to the top and over here let me wrap this with [Music] and paste it here and on this tip we can do wire in our right and if i refresh the base and it is working now see how easy this is and on our appointments as well let me remove what ignores from there as well let me go to create appointment form and here we are using wire ignore we don't need this because we are adding that on our component itself let me press it let me select this and it is working so this points for this video i hope you learned something from this video so don't forget to like share and subscribe to this channel as i will uploading the videos like this till then have a great time and i will see you in the next one

Channel: Clovon

Views: 3,190

Keywords: tutorial, laravel, laravel and livewire project, laravel admin panel, laravel adminlte, laravel admin, livewire tutorial, laravel application development, learn laravel 8, learn laravel framework, laravel livewire popup modal, laravel livewire tutorials, creating reusable components with laravel, reusable select2 component, creating reusable components in laravel and livewire, laravel livewire tutorial, laravel livewire, laravel livewire tutorials for beginners

Id: i39e5cbdUjI

Length: 21min 58sec (1318 seconds)

Published: Thu Jun 17 2021