turbolinks pjax


Topic: turbolinks pjax

TheBestGin pro asked 4 years ago

Hello, after page load from cache by turbolinks or pjax, all buttons lose the click-wave-effect. How initialize mdb java script manuel?  

Piotr Glejzer staff commented 4 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 2 years ago

I've got the same problem using turbolinks. Is there a function to initialize mdb after loading from cache?


Grzegorz Bujański staff answered 2 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 2 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 2 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 2 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 2 years ago

I'm glad you found a solution to this problem.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • 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