Allow to put mdb.js to header

[ostrolucky]

We have lot of inline javascripts generated via backend. If these scripts use mdb functions, they will crash, because mdb.js requires to include it at the end of HTML body.

Only way I see to make this currently work is to wrap all of the inline scripts to some function, which sucks.

[mattonit]

Do you load MDB.js after jQuery and Bootstrap?

[ostrolucky]

Yes. Problem is definitely mdb.js.

[mattonit]

do you get any console logs?

[ostrolucky]

TypeError: body is null

[ipepe]

@gadelat I tried convincing them at #31 , not luck. I use this to fix it:

(function ($) {
    $(document).ready(function () {
        //Initialization
        Waves.attach('.btn, .btn-floating', ['waves-light']);
        Waves.attach('.waves-light', ['waves-light']);
        Waves.attach('.navbar-nav a:not(.navbar-brand), .nav-icons li a, .navbar form, .nav-tabs .nav-item', ['waves-light']);
        Waves.attach('.pager li a', ['waves-light']);
        Waves.attach('.pagination .page-item .page-link', ['waves-effect']);
        Waves.init();/* FORMS */
    });
});

[blimey85]

I have the Pro version and I'm using it with a Rails app, which uses TurboLinks, which requires all JS files to be included in the head. @ipepe's work around didn't work for me but I managed to split out MDB from the standard manifest and load it in the body. The problem I'll run into is that TurboLinks is going to replace the body of the page, and MDB should already be loaded rather than it loading again and again. It will be cached of course, but that's still a lot of overhead.

Is it not possible for MDB to be updated to solve this problem? Is there a feature or file I can drop that will resolve this? It looks to just be the Waves feature?

[agavazov]

Please wrap Waves.initialization into $(document).ready(function () { ... initialization here .... }); as @ipepe told you.

[mattonit]

I marked this as a bug and added to our TODO list

[vipantonio]

Please wrap Waves.initialization into $(document).ready(function () { ... initialization here .... }); as @ipepe told you.

I think it should be wrapped into:

$( document ).on('turbolinks:load', function() { ... initialization here .... });

[muzbox]

I marked this as a bug and added to our TODO list

Was this ever actioned? I am having the same issue with turbo links and waves

[carltonsmith]

having the same issue here

[locddspkt]

I have the same issue. This is what I should do:
Include all the css, js script but mdb.js. And then, put it at the bottom before the end body tag

[PiotrObrebski]

We decided that it can be done. Waves.js will be launched after the document is ready. It should be in the next released package.