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.
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.
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 😉
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.
в случае передачи модели в коде html в функцию viewUser вы передаете json параметр, а не просто идентификатор (1,2,3...), т.е. лишние сведения в коде, что всегда приравнено к проблеме с безопасностью
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
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?
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.
@@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 :)
@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?
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
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..
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
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
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.
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
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 ruclips.net/user/sgaming/emoji/7ff574f2/emoji_u1f64c.png
Next Level!! Amazing Alpine and Livewire content :D
Thanks Mori for the kind words. Glad the video was helpful.
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.
Awesome tutorial for live wire beginners. Developer from Theni,
Tamilnadu, India
really helped bro. finally got rid of bootstrap modal issue
Awesome tutorial! Thank you.
One of the most useful tutorials at the time!!!
Thanks for watching
You are one of the best channels in dev thx bruh
Very well explaned and very practical.
Thank you
Great content and amazing video, thank you I am searching this type of video and got it ..
Thanks for watching. glad to hear that.
Thanks a lot...There was no tutorial on modal calling in latest version of laravel. Your videos helped me a lot.
Really awesome explanation ❤
Glad you liked it
Great i spent half day trying to make work some other packages and i did with this you are the man
This was so helpful mate, thank so much for this video
Glad it was helpful. Thanks for watching Helder.
thankyou soo muchhh , this is really what I need , since using modal from flowbite that uses its own javascript removes initialization once it renders
Amazing explanation, thank you!
Thanks for watching.
Great content as always.
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.
I think you are iranian, so: خیلی عشقی داداش.
Yes bro, Thanks for watching.
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 😉
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.
what is dialog element with dialog api?
@@Sh1nitsu a quick mdn search will tell you everything you need to know😊
do you mean the HTMLDialogElement?
@@mogr488 yes it's documented under element dialog on mdn
Thanks
Thank you for watching
helpful! Thank you
Thanks for watching. Glad it was helpful!
This is very interesting! Is there a way to have a code behind file for the modal, and handle the closing, opening from there?
в случае передачи модели в коде html в функцию viewUser вы передаете json параметр, а не просто идентификатор (1,2,3...), т.е. лишние сведения в коде, что всегда приравнено к проблеме с безопасностью
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
Sure Thing, I have had multiple requests on this, I will try to make a video on it this week. Thanks for watching.
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?
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.
@@yelocode Thank you for your valuable input
@@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 :)
@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?
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
you are the best,
Thank you
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..
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
Thanks!!!!!!!!😁
Thanks for watching
Can you make a modal who’s state is available in the url. Like ?modal=true&path=pathview
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
why doesn't bootstrap modal work?
make TALL Stack course 🙏
Will have more videos in the coming week. Thank you for the support.
thankx, kindly make a modal using $dispatch only with livwire without alpine js , like a conditional rendering @if($isOpen) display the modal @endif
Will create a livewire only modal video soon Mugerwa. Thank you for watching.
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.
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
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
I need mentorship but your email address is not working 😞
I'm having trouble with closing the modal, i'm using vite and livewirestyle
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
@@yelocode when using tailwind cdn, modal is working. It has error regarding module.esm
$this->dispatch('open-modal',name:'user-view-modal'); not working
Have you created modal with name or not? If not than this will not work.
Heloooo, Can you make a modal livewire with crud? Pleaseeeeeeeeeeeeeeee
please create child modal
Thanks for watching, I will put that in list of videos to make.
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
ruclips.net/user/sgaming/emoji/7ff574f2/emoji_u1f64c.png