Rails with mmenu / sidr with jQuery and Turbolinks release
I was unable to figure this out, but there was a suspicion that turbolink was the culprit. Changing the menu to make sure it's not some weird question.
I open the page, click the menu button - it works, it opens the side menu, I click the link in the menu and it goes back to my application. The menu button no longer works. Initially when I had with mmenu it seemed like the click event associated with mmenu was missing. The cider seems to be there, but nothing happens.
I configured my jquery like this
Rails 4: how to use $ (document) .ready () with turbo links
Sidr example
<a id="simple-menu" href="#sidr">Menu link</a>
<div id="sidr">
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
JS file included in tree
var ready;
ready = function() {
$('#simple-menu').sidr();
};
$(ready);
$(document).on('page:load', ready);
I have already installed my application.js with the jQuery turbolinks gem for example.
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require bootstrap-sprockets
//= require jquery-ui/core
//= require jquery-ui/autocomplete
//= require jquery.mmenu.min
//= require_tree .
//= require turbolinks
Suggestions?
source to share
I have the same problem with Mmenu and Turbolinks. And I did as evanbikes describes. Disabling turbolinks and Mmenu works. But when enabled, it just doesn't work after clicking the link in the menu. Everything else works, all our js code. So it must be something related to Turbolinks.
https://github.com/karlingen/rails4_mmenu
https://github.com/BeSite/jQuery.mmenu/issues/41
I would like to use Mmenu, but at the moment it is not possible with Turbolinks.
source to share
Try it.
Install 'jquery-turbolinks' https://github.com/kossnocorp/jquery.turbolinks
then just
//= require jquery
//= require jquery.turbolinks
//= require jquery_ujs
//= require foundation
// Make sure to add your code here
// For example with foundation it is:
$(function(){ $(document).foundation(); });
//= require turbolinks
//= require_tree .
Hope this helps. At least it worked for me.
source to share
Here are some thoughts:
1) Make sure your javascript is included in the head and not in the lower body. Since Turbolinks reloads the body every time, you will be reloading the same javascript and possibly reinitializing duplicate listeners.
2) With the jquery.turbolinks gem, you only need it $(ready)
, not $(document).on('page:load', ready)
. This is, in theory, what jquery.turbolinks does for you.
3) Dismissal ready
at all? Have you posted there console.log
or alert
?
4) Are you loading things via ajax or something after the DOM is ready? If so, you will need to call .sidr()
manually whenever it actually appears on the page, even if it is after the DOM is ready.
source to share
There is a way to fix this problem. From Turbolinks Doc - With Turbolinks disabled , you can add an attribute data-no-turbolink
to disable turbolink on that particular div tag. So change your code like below and it will work without any problem.
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active" data-no-turbolink><a href="/">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
source to share
I know this has been a while, but want to leave an updated solution for someone who might look like.
Mmenu developers have added wrappers to support various frameworks including turbolinks: mmenu framework wrappers
So now all you have to do to resolve this turbolinks error is download the latest mmenu from their site or github repo and include the file located in dist / wrappers / turbolinks after your main mmenu file.
If you enable them manually, it looks like this:
<script src="path/to/jquery.mmenu.min.js" type="text/javascript"></script>
<script src="path/to/jquery.mmenu.wordpress.min.js" type="text/javascript"></script>
And if you use asterisks like:
//= require jquery.mmenu
//= require jquery.mmenu.turbolinks
source to share