Laravel Modal Using Alpine JS + Livewire 3

[@mori181186]

Next Level!! Amazing Alpine and Livewire content :D

[@yelocode]

Thanks Mori for the kind words. Glad the video was helpful.

[@__Cypher]

It's the perfect tutorial series for those who want to learn Livewire 3. This series is simple and straight-focused on the topic. not a single second is wasted here. Thank You @yelo Code #NOTES for those who are starting this now, you do not need to include Alpine CDN anymore It is included out of the box and you can create a livewire component for the modal instead of a regular blade component. the choice is yours.

[@maddynewera]

Awesome tutorial for live wire beginners. Developer from Theni, Tamilnadu, India

[@mrcoder7438]

really helped bro. finally got rid of bootstrap modal issue

[@GiorgiBekurashvili]

One of the most useful tutorials at the time!!!

[@yelocode]

Thanks for watching

[@johnston777]

Awesome tutorial! Thank you.

[@WallSpot]

Thanks a lot...There was no tutorial on modal calling in latest version of laravel. Your videos helped me a lot.

[@kouzokiodin3623]

You are one of the best channels in dev thx bruh

[@kreaweb-be]

Very well explaned and very practical.

[@yelocode]

Thank you

[@lokendrajargha9969]

Great content and amazing video, thank you I am searching this type of video and got it ..

[@yelocode]

Thanks for watching. glad to hear that.

[@eduardodudu5695]

Great i spent half day trying to make work some other packages and i did with this you are the man

[@helderlimaletsgo]

This was so helpful mate, thank so much for this video

[@yelocode]

Glad it was helpful. Thanks for watching Helder.

[@kadirertan8664]

Great content as always.

[@akashlmp]

Really awesome explanation ❤

[@yelocode]

Glad you liked it

[@shaneenriquez7369]

thankyou soo muchhh , this is really what I need , since using modal from flowbite that uses its own javascript removes initialization once it renders

[@EmersonCabrera]

Amazing explanation, thank you!

[@yelocode]

Thanks for watching.

[@HamadAbdulla_7]

Thanks

[@yelocode]

Thank you for watching

[@BhavyaJain-t5d]

i want to show this data in wire:model but i have to put the if condition to show the data in form when event is dispatched without if condittion geeting emptiy feed for name adress..

[@hancestephen4586]

@slot('body') @endslot That code above does not render the value passed to the blade component. The error undefined variable is returned. Even if you check if value is set, still it does not work. What is the problem, any idea?

[@hshxy]

This is very interesting! Is there a way to have a code behind file for the modal, and handle the closing, opening from there?

[@brandonjohn2434]

In AlpineJS, there is also an attribute called 'x-cloak' which basically hides the modal on page load. This way the 'display:none' styling is not needed.

[@francescolettera9954]

helpful! Thank you

[@yelocode]

Thanks for watching. Glad it was helpful!

[@mohammadhoseinkamari]

you are the best,

[@yelocode]

Thank you

[@Stoney_Eagle]

Nice tutorial, you should use the dialog element with the dialog api. This adds accessibility by forcing the modal to he in the very top layer of the dom handled by the browser and constraints the tab key to the modal, preventing scroll and adds an automatic backdrop that you can style with a pseudo class 😉

[@yelocode]

Thank you for watching. Great point I don't think I have seen it used in Laravel Community before. Adding a dialog element would be very nice specially with the accessibility point you mentioned. Thank you for sharing bro will start using it myself.

[@Sh1nitsu]

what is dialog element with dialog api?

[@Stoney_Eagle]

@@Sh1nitsu a quick mdn search will tell you everything you need to know😊

[@mogr488]

do you mean the HTMLDialogElement?

[@Stoney_Eagle]

@@mogr488 yes it's documented under element dialog on mdn

[@carlosluistorres]

Hi, thanks for the tutorial, I'm really thankfull, but I woulld like to make you a question, I've followed all the steps but I cannot make the buttom works right after I've search somethin' on the input, I mean it seems like the livewire stopped

[@wlakovic]

Thanks mate, amazing tutorial! I have a question, is it possible to render livewire component inside a modal? I was able to pass the selectedUser to it's mount method, and after I reached the render too, but after simply it doesn't render it into the modal. Edit: on second button click it loads the view properly, but I don't understand why does it work like that? Thanks in advance

[@ReuelTeodoro]

Can you make a modal who’s state is available in the url. Like ?modal=true&path=pathview

[@yelocode]

You could add something like code below to your modal component so it can be toggled on and off using url hash. With URL params it's also possible just a bit more code. x-on:hashchange.window="show = (location.hash === '#'+name)" above code will show your modal if the url hash changes to the modal name. You can then use links to open and close the modal, also if the page reloaded, the modal will automatically open. I put the full version of a modal with url support here : gist.githubusercontent.com/MatinMN/06f3a488dc6619e3efb8db743cfc73c4/raw/d7c265999f0b56aea2b29a87254a88ad21cf173f/modal-with-urlhash-support.blade.php Hope it's helpful for your use case

[@mohammadhoseinkamari]

I think you are iranian, so: خیلی عشقی داداش.

[@yelocode]

Yes bro, Thanks for watching.

[@Sh1nitsu]

I have a question. I clicked the create button inside a modal, then validation comes, then closed the modal. How to reset the validation so that after opening the modal it looks new again without the error message.

[@mh5854]

Create a function and put $this->resetErrorBag(); in it inside the livewire component, use wire click to call the funcion on the close modal button

[@mh5854]

Don't forget to use wire.ignore.self on the html tag where u have the modal id thst way the modal will not be closed on validation fails

[@devilwarrior3108]

why doesn't bootstrap modal work?

[@rondevPH]

I'm having trouble with closing the modal, i'm using vite and livewirestyle

[@yelocode]

I have the full code link in the description, maybe you can try compare and see if there are any differences. I don't think using vite would cause any issues. As long as you don't import alpine js multiple times

[@rondevPH]

@@yelocode when using tailwind cdn, modal is working. It has error regarding module.esm

[@meraikwd1179]

I have been watching your livewire videos for a while now and learning a lot. Do you think I can build something like language reactor Chrome extension? Basically it adds subtitels and some interactivity to the video like adding vocab to study them later. Can this be achieved with livewire or will i need something like react or vue?

[@yelocode]

Looking at the language reactor website and their extension, the video playback with live spoken word and translation highlighting, I don't think it's possible with livewire. You will have to write javascript to get that functionality. Maybe with livewire and some js you can get it done. But I personally would use Vue or React to build a website like they have. It will be easier to maintain in the long run.

[@heshamalmeraikhi6081]

@@yelocode Thank you for your valuable input

[@meraikwd1179]

@@yelocode I like how easy it is to work with livewire, but I had this concern it might be messy to replicate this functionality with livewire. I am working on another project which I think livewire will be a perfect fit for. Thank you for your replay and keep up the good work :)

[@hasithudayanga6160]

Like this video. Can you do a video about Select field with livewire. Async search that can search records from database. Not loading all data like 10 items per time. Select fields use in many places. ❤ Really appreciate

[@yelocode]

Sure Thing, I have had multiple requests on this, I will try to make a video on it this week. Thanks for watching.

[@lexxkrt]

в случае передачи модели в коде html в функцию viewUser вы передаете json параметр, а не просто идентификатор (1,2,3...), т.е. лишние сведения в коде, что всегда приравнено к проблеме с безопасностью

[@brunogabriel3786]

Thanks!!!!!!!!😁

[@yelocode]

Thanks for watching

[@isaachatilima]

I need mentorship but your email address is not working 😞

[@mugerwaobadiah1621]

thankx, kindly make a modal using $dispatch only with livwire without alpine js , like a conditional rendering @if($isOpen) display the modal @endif

[@yelocode]

Will create a livewire only modal video soon Mugerwa. Thank you for watching.

[@Naderabdou]

$this->dispatch('open-modal',name:'user-view-modal'); not working

[@sforshoaib]

Have you created modal with name or not? If not than this will not work.

[@abdulkarimomer6290]

make TALL Stack course 🙏

[@yelocode]

Will have more videos in the coming week. Thank you for the support.

[@Sh1nitsu]

Heloooo, Can you make a modal livewire with crud? Pleaseeeeeeeeeeeeeeee

[@md.mominulhaque2157]

please create child modal

[@yelocode]

Thanks for watching, I will put that in list of videos to make.

[@onnewf9288]

thank you sir, this is very crystal clear tutorial 🙌 i used to be confused by modal things, but after watching this tutorial i think i can understand the concept very well kzbin.infogaming/emoji/7ff574f2/emoji_u1f64c.png