Topic: turbolinks pjax
TheBestGin pro asked 6 years ago
Grzegorz Bujański staff answered 4 years ago
Unfortunately not. Generally, the wave effect is added when the MDB scripts are loaded. It seems that in this case the scripts are loaded first, then the cache.
The only solution is to manually add a wave effect by adding code that runs automatically when the page loads:
$(document).ready(function () {
//Initialization
Waves.attach('.btn:not(.btn-flat), .btn-floating', ['waves-light']);
Waves.attach('.btn-flat');
Waves.attach('.chip');
Waves.attach('.view a .mask', ['waves-light']);
Waves.attach('.waves-light', ['waves-light']);
Waves.attach('.navbar-nav a:not(.navbar-brand), .nav-icons li a, .nav-tabs .nav-item:not(.dropdown)', ['waves-light']);
Waves.attach('.pager li a', ['waves-light']);
Waves.attach('.pagination .page-item .page-link');
Waves.init();
});
However, I am afraid that this will cause a duplication of the effect on elements where the waves were correctly added after the page was loaded. The effect will be that the wave will appear darker on these elements. In fact, it will be two waves.
RichardT pro premium answered 4 years ago
It's not just the waves effect, it seems everything isn't properly initialised. After a reload of the page everything works fine.
Grzegorz Bujański staff commented 4 years ago
The reason is the same. As scripts are loaded, some code catches components and initializes them. If these elements are added after the page is loaded, unfortunately, they will not be initialized, so they will not work either.
RichardT pro premium commented 4 years ago
fixed it by adding this to my application.js:
document.addEventListener("turbolinks:load", () => { $.getScript("/js/mdb.min.js", function(){ console.log('MDB Loaded'); }); });
Grzegorz Bujański staff commented 4 years ago
I'm glad you found a solution to this problem.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Notebook
- Browser: chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No
Piotr Glejzer staff commented 6 years ago
So what exactly do you want, do you want loads mdb.js after when you load from cache or before?RichardT pro premium commented 4 years ago
I've got the same problem using turbolinks. Is there a function to initialize mdb after loading from cache?