-
Notifications
You must be signed in to change notification settings - Fork 4.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[1.0.0.alpha1] Side nav doesn't work with turbolinks 5 #5396
Comments
Most likely this is the issue you are facing:
https://stackoverflow.com/questions/18769109/rails-4-turbo-link-prevents-jquery-scripts-from-working
…On Wed, Nov 22, 2017 at 4:50 PM, Guilherme Pejon ***@***.***> wrote:
I discovered this issue when I was trying to upgrade to materialize
1.0.0.alpha1, and I managed to create a sample app showing the issue.
You can find the sample app right here
<https://github.com/guilpejon/materialize_turbolinks_issue>
To reproduce the error with the sample app do the following:
1. Download the code and run rails s
2. Click the menu icon on the left of the navbar to open the sidenav
3. Click on any of the links on the sidenav
4. Try to open the sidenav again by clicking the same icon from before
5. The sidenav won't open again because the page now refreshes each
time you click the icon
If you comment out the //= require turbolinks from the application.js
file, it works as expected.
*Expected behavior*
Side nav opens every time I click the trigger button
*Actual behavior*
Side nav only works the first time you open it
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
<#5396>, or mute the thread
<https://github.com/notifications/unsubscribe-auth/ACpaxyI3tCO7KaR3iArYxZYoQEYUTMvKks5s5ME7gaJpZM4QoKhe>
.
--
Doggy sends his greetings from Mars.
|
I think it's probably related to the fact that the javascript is being loaded just once, but I had the same setup with the older version of materialize and the sidenav worked just fine alongside Turbolinks (it's even in production), so that's why I think it could be related to an issue with the newer version. |
Why does your page refresh when you click the icon? That shouldn't be happening |
I'm using the materialize-sass gem to add Materialize to my project, and here is the code to initialize the sidenav with Turbolinks:
My guess is that after I open the sidenav and click in one of its links to close it, I somehow lose the link between the sidenav and my anchor tag, so if I click the menu icon to open it again, the page tries to render the |
try adding prevent default to the |
It stops the page refreshing, but it doesn't open the sidenav again. |
you should probably init on |
seem like instance still alive when turbolinks:load page.
|
Thank you @mkhairi, that works! |
I'm getting same issue. document.addEventListener('turbolinks:load', function() {
elem = document.querySelector('#slide-out');
instance = new M.Sidenav(elem, {});
});
document.addEventListener('turbolinks:before-visit', function() {
elem = document.querySelector('#slide-out');
instance = M.Sidenav.getInstance(elem);
instance.destroy();
}); prevent "TypeError: instance is undefined" error when new page loaded. document.addEventListener('turbolinks:load', function() {
elem = document.querySelector('#slide-out');
instance = new M.Sidenav(elem, {});
});
document.addEventListener('turbolinks:before-visit', function() {
elem = document.querySelector('#slide-out');
instance = M.Sidenav.getInstance(elem);
if (instance){
instance.destroy();
}
}); |
Note that
|
the correct event of turbolinks to fixing this is turbolinks:before-cache |
Hi, I'm trying to test MaterializeCSS on my rails app with M.AutoInit(), and running into the same issue (sidebar working on first load, but not after clicking on a link or using the browser's back button). Is that possible? In which file should I add the (edited) code you provided? Thanks! |
Thanks @mkhairi, @elmoaaron from 2021 :) . Had the same problem, banged my head for hours with this one until I found this. |
Thanks, @mkhairi, @elmoaaron you guys saved my bacon there, here's a link to the docs related to |
I have found a solution for this using Rails 7 & Stimulus: initialize() {
M.AutoInit();
}
disconnect() {
M.Sidenav._sidenavs = [];
} |
I discovered this issue when I was trying to upgrade to materialize 1.0.0.alpha1, and I managed to create a sample app showing the issue.
You can find the sample app right here
To reproduce the error with the sample app do the following:
rails s
If you comment out the
//= require turbolinks
from the application.js file, it works as expected.Expected behavior
Side nav opens every time I click the trigger button
Actual behavior
Side nav only works the first time you open it
The text was updated successfully, but these errors were encountered: