Menu works fine only on one page

[k1r8r0wn]

All works fine only in root page in my Rails app, and in some others but not on full site.

The .button-collapse losts functionality and menu doesn't work. I just click on it, or tap (in mobile device) and nothing happens.

Maybe my jQuery initialization is wrong? But it looks fine:

$(function() {
  $(".button-collapse").sideNav();
});

Please see also http://stackoverflow.com/questions/33586722/materializecss-menu-works-fine-only-on-one-page.

Thanks for watching!

[mkhairi]

hi @kirbrown, if you using turbolink you should initialize you js like this:

$(document).on('ready page:change', function() {
  Waves.displayEffect();
 $(".button-collapse").sideNav();
});

[k1r8r0wn]

Yeah, it's worked, also I try to add

jquery.turbolinks 

gem and this code:

//= require jquery.turbolinks 

in JavaScript manifest file and it's also solve the problem. But your way is more simple. Thanks!

[NySiya]

@k1r8r0wn I simply do what you write and explain above but it still doesn't work :(

[k1r8r0wn]

@NySiya , maybe gem versions are Incompatible. I mean Rails & this gem...

[NySiya]

I use Rails 5 with Materialize Sass 0.98.0 . I even downgrade my materialize-sass to version 0.97.6. But my Sidebar menu still not work

[mkhairi]

@NySiya, rails 5 is using turbolinks 5 by default.

$(document).on('turbolinks:load, function() {
  Waves.displayEffect();
 $(".button-collapse").sideNav();
});

[NySiya]

@mkhairi, Thank you so much for saving me. 💯

[toberoni]

@mkhairi Thank you for the hint. However, it seems that you have forgotten an apostrophe in the first line, it should be: $(document).on('turbolinks:load', function() {

[theshashiverma]

@mkhairi but mine still does not work