Topic: Timepicker only works on full page refresh
sammcd pro asked 1 year ago
I am working on a rails app that uses turbo. I have noticed that my time picker only loads if I refresh the page. It does not work if I navigate to the page via a link.
My app uses Turbo, so I have the following JS to make sure MDB form elements work:
document.addEventListener("turbo:load", function() { document.querySelectorAll('.form-outline').forEach((formOutline) => { new mdb.Input(formOutline).init(); }); })
Sorry for the above snippets is not working for me.
This works for all form elements except for the time picker. Is there any additional initialization I should do for the time picker at this point in time? The docs suggest new mdb.Timepicker( as a way to create a Timepicker in JS however this function does not seem to exist for me.
*Expected behavior*Timepicker icon exists on form even after turbo page loads.
*Actual behavior*Timepicker only works if I full refresh the page.
Resources (screenshots, code snippets etc.)
Mateusz Lazaru staff answered 1 year ago
This is how timepicker can be initialized manually: https://mdbootstrap.com/snippets/standard/mlazaru/4915440#js-tab-view
Remember to delete .timepicker
class from the wrapper when initializing manually to avoid double initialization.
In case it doesn't help, please show me console errors if there are any.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 6.0.1
- Device: Mac
- Browser: Safari
- OS: Big Sur
- Provided sample code: No
- Provided link: No