Fix wire:navigate javascript component not working | Livewire 3

Welcome to our livewire 3 course, in this course we will cover all the basis needed to build dynamic front end components using livewire. I show you guys how to fix a common issue when using wire:navigate.
Laravel 10 Course mentioned in the video:
• Laravel 10 Tutorial : ...
Course Playlist :
• Laravel Livewire 3 Cou...
Tailwind CDN :
tailwindcss.co...
Blade and PHP codes used :
gist.github.co...
Through out the course we will cover:
how to make components
Actions
Properties
Form Submission and Validation
Flash Messages
Tables and Pagination
File Uploads
Inline Components
Full page Components and Layouts
Events
Offline States
URL Query Parameters
Nesting Components
Navigate
Loading states, Lazy loading and placeholders
And more
Livewire 3 website :
livewire.larav...
Boostrap Documentation:
getbootstrap.c...
If you would like me to make more livewire videos, please let me know by liking the video and commenting what you like to learn next.
What is livewire:
Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel. (Taken from Livewire Documentation)

[@wevertonlotosport]

I really like your channel cause you talk about problems that we will find when working on a project with real data, real features, real scenarios, projects that will be 100% deployed after finished. Not just a bunch of components, bloated with fake data.

[@abdalkhalekchamkha3622]

thats true

[@yelocode]

Thanks you watching, Glad the videos are helpful.

[@Pururum]

Man, you save me hours of debugging. Thanks

[@yelocode]

Great to hear that

[@yelocode]

Hey everyone, One thing I forgot to mention in the video is destroying or removing the old instance, depending on how the library works you may have to remove the old instance and then re-initialise it. Something to be aware of. Thanks for watching.

[@abdalkhalekchamkha3622]

If you can do short video on it will be great

[@ilahazs]

how to do the same thing in Bootstrap 5? I wondering how to reinitialize it sir.

[@abrahammaleko6600]

Your the best i was literally spending my sunday debugging why it was happening until i saw your videos, thanks man

[@yelocode]

Glad I could help

[@ronaldngarombo1026]

I had removed wire:navigate from my project. Nice of you 👍

[@momodjah-low6944]

This was what i've looking for...helped me a lot ..thanks

[@js_caleb5976]

Great help, It fixed my issue. It deserves a subscribe button. Love it

[@yelocode]

Thanks for watching🙏

[@parimal20]

Thanks man. I was debugging from many days but you gave perfect solution.👍👍

[@onnewf9288]

thanks a lot, you saved my day, this was the solution i've looking for i'm also using the flowbites template and got the same issues

[@josephajibodu2377]

Thanks. Your video was very helpful.

[@yelocode]

Glad it was helpful!

[@samirmaharjan6437]

I was having similar issue when i navigate to next page in pagination. This video really helped me Thanks

[@adeonabule1517]

Please how did you fix with pagination?

[@samirmaharjan6437]

@@adeonabule1517 I was having issues with select2. i just reinitialized the functions on wire:navigated..

[@codewithSJM]

This is Amazing Man! stay blessed saved my day!🤗

[@wesley68593]

Thank you very much! That’s exactly what I was looking for! You solved my problem.

[@yelocode]

Great to hear that. Thanks for watching.

[@giokuan2327]

Thank you for this info, fixed my swiper slide 🥰

[@yelocode]

Glad it helped!

[@lvltech]

Great awesome i was thiking i make a mistake but cool to know about, thanx.

[@nibirahmed6469]

Thanks very much for the help, but I want to load the select2 on one particular page, how can I do that?

[@Skaydi-X]

but i use a template , i have many js files and js vendors, how can i fix it please

[@rodrigoweiss5201]

You save my day!!! Thanks!!! 🥳

[@yelocode]

Happy to help!

[@abdulrehmandar8541]

How do I fix these issues with Bootstrap 5? Is there any advice? I am using vuexy admin panal. I personally fixed it using alpine js.

[@WEESPlayzZz]

How I thankyou for this help , you are the best big brother thanks so muchhh for the video ❤❤❤❤❤❤. It's help us alot .. keep growing 😊

[@yelocode]

Glad the videos are helpful. Thank you for watching. One thing I did not mention in the video is, you may need to destroy the old instance before reinitialising it again, depending on the library you are using.

[@WEESPlayzZz]

@@yelocode Okie 👌

[@abdalkhalekchamkha3622]

You realy save me i was thinking when i want to go to a page that i use scripts on i need to reload it

[@yelocode]

Thanks for watching, glad it was helpful. Although depending on the library you are using, you may need to destroy the old instance before reinitialising it, I didn't mention that in the video.

[@druganov962]

You can also solve this by using AlpineJS's 'x-init' directive. (At least this is how i did it) so first i make a listener for that event that AlpineJS calls, since i could not directly call functions in x-init that were not defined by Alpine. this will be in your scripts tag Alpine.data('properties', () => { return { initSelect() { initSelect2() }, } }) function initSelect2(){ Your init code here blablabla } and finally, just put this in your original select element: x-init="initSelect"

[@nathanmwamba8840]

Man you are the best, now i have a problem with the navigating you have said when you put that livewire:navigated then then you can visit pages without js problems but when i do that and i visit page 2 and on that page 2 when i hit refresh on my browser and go back to page 1 where I have put my inline js that contains the livewire:navigated the js is failing to load but when I have not refreshed the page everything is working properly

[@MichaelJohnSamonte]

Hi, thanks. I encountered the same issue in pagination, but the wire: navigated is not triggered. Any thoughts? Thanks in advance.

[@yelocode]

Thanks for watching. I personally have not had this issue before, but here is how I would go about fixing it using one of below methods. 1 - try to use wire:ignore to prevent the dynamic element from being re-rendered on component updates 2 - try to move the dynamic element outside the component if possible 3 - dispatch a browser event when page changes and then do the same thing I did in the video. In your livewire component need to add the below method to listen for pagination page changes and dispatch an event: public function updatedPage($page) { $this->dispatch('pagination:updated'); } in your js or blade file listen for it and reinitialise your js element: document.addEventListener('pagination:updated', () => { console.log("pagination event"); }) I hope this can help solve your issue. Please do let me know if you find some other approach so I can let share with other viewers if they have a similar issue.

[@arischannel8168]

for my template not working using this feature navigate livewire,always getting error javascript because crash with internal js template

[@sabinmagar4152]

i have a question. We have reinitialised select2 and then we submit the button how to get that select field data after subject a form can we use wire:model or else. please help.

[@samsamimf9]

I was suffering for this problem yesterday😀

[@kreaweb-be]

Since I use wire:navigate the autofocus on the first input on the register and login pages stopped working. Any ideas? Thanks.

[@yelocode]

I didn't know this issue, existed, one easy solution could be to use alphine js: by adding x-init="$el.focus();" to the element you want to auto focus, seems a bit hacky though, maybe livewire team will add some update to trigger autofocus on page changes, or we may have to do it ourselves, v3 is quite new so still not sure what the best approach may be.

[@kreaweb-be]

@@yelocode This works. But I agree, maybe wait for V3 to mature a bit more. Thanks.

[@SunDev-c4s]

Hi Yelo Code, im using laravel livewire 3 and bootstrap 5, could you please provide a hint on how to solve this issue. thank you in advance

[@khairulazmi9174]

did you able to find any solution ?

[@SunDev-c4s]

yes@@khairulazmi9174

[@SunDev-c4s]

@@khairulazmi9174 thank you.

[@ilahazs]

@@khairulazmi9174 How to fix it bro?

[@ilahazs]

@@SunDev-c4s Hi, how did you fix it?

[@osawereao]

God bless you a bundle. I need one more help please @YeloCode PROBLEM: I have livewire deleting records from a row (listed on a HTML table) and I want to be able to just remove that element on successful delete without having to redirect or refresh.

[@angelfireful]

🎉🎉🎉

[@sangatcepat]

How about using preline? Please provide a tutorial. Thank you

[@AhmadImam22]

i have an issue with this navigate and flowbite too. i am using flowbite admin panel and when it in mobile screen, the burger button of the aside menu did'nt work. but when i reload the page, the burger is work perfectly. hope you can help me

[@susharto]

I also have the same problem, sir. have you found the solution?

[@nerisonpitogo3717]

Saved me.

[@yelocode]

Thanks for watching

[@mohamedbarrah3439]

pls i have the same problem but with tailwind-Elements -- SideNav -- how to fix it all th ``` import './bootstrap'; import { Sidenav, initTE, } from "tw-elements"; document.addEventListener('livewire:navigated', () => { console.log('Hello World from your main file!'); initTE({ Sidenav }); }); ``` but this is not working

[@lfan_tv]

Another problem is when creating datatable using flowbite and livewire3, it cannot show the modal if I add wire:click in the button tag

[@yelocode]

Do you have wire:click on the same button that opens the modal?

[@lfan_tv]

@@yelocode ya I already add the wire:click on the button tag

[@achrizal3545]

how about with vite js to import module Swiper js

[@galuhpradipta2705]

Thanks!

[@yelocode]

Thanks for watching

[@stackdeveloper7818]

sir kindly tel me simple bootstrap 4 how can use init because its not work flowinit()

[@mahmoudherbawi1844]

did you got the solution for that?

[@Harshad-h1p]

thanks

[@hyuugasenpai7551]

can anyone help me, I have implemented what has been done in the video, the code works, for example in dropdowns and so on,but I still experience the bug that the button cannot be clicked on the navbar button, can anyone help me?

[@globetrotterxxl7440]

good to know! Shouldn't we call $(...).select2('destroy'); before initializing it again and again to avoid a memory leak?

[@yelocode]

really good point, I forgot to mention that, probably have to that depending on how the library works. Although I don't think above code will work, since on the new page the DOM has changed. Probably would have to use livewire:navigating event to destroy it before we change the page.

[@HamadAbdulla_7]

thank you

[@yelocode]

Thanks for Watching

[@devkumarverma7376]

hii sir can you please tell me about the exact same solution using liveiwre 2 ?

[@samirmaharjan6437]

livewire2 doesnot has wire:navigated so, we need to emit extra event each time and on those event reinit the function.

[@eramitgupta271]

When I am uploading files, like photos, and videos, select 2 is not working after that, how do I fix it? please help me

[@yelocode]

Uploading files may be reloading your livewire component. You may need to either look into wire:ignore or try to re initialise your select2 element on every update by adding a js event listener for it

[@eramitgupta271]

@@yelocode I am not able to understand, can you tell me, data is not getting saved after.

[@eramitgupta271]

@@yelocode wire:ignore I need a video on this, I am having a lot of trouble, please help.

[@yelocode]

@@eramitgupta271 I will try to cover wire:ignore on the upcoming livewire videos

[@eramitgupta271]

@@yelocode thank you 😊❤️

[@brandonbroga8983]

I’m trying to get FullCalendar to re init… But it wont

[@microfinancesystem135]

Thank you help me

[@jobianstechie]

Please help me solve bootstrap navbar stopped working after coming back to recent page

[@mahmoudherbawi1844]

did you solve it?

[@jobianstechie]

@@mahmoudherbawi1844 no

[@ilahazs]

How to reinitialize bootstrap 5 in livewire 3?

[@mahmoudherbawi1844]

did you got a solution for that?

[@samirmaharjan6437]

i got the same issue

[@ilahazs]

I dont, but for example, i'm mixed alpine js and bootstrap dropdown for open dropdown

[@cartmellTV]

If anyone is running into with const and let constantly being declared, again, I just changed everything to var and didn't have anymore issues

[@JamesAutoDude]

I'm starting to think wire:navigate just isn't worth it, and maybe I should use something else other than livewire :/ I'm having an issue where some pages reload the whole dom (the page reloads), while others don't... and other weird behavior.

[@samirmaharjan6437]

agree