Rails with mmenu/sidr with Jquery and Turbolinks issue

Question

I haven't been able to get to the bottom of this but there was suspicion that turbolinks was the culprit. Changing menus just to make sure it wasn't some odd mmenu issue.

I open the page, click the menu button - it works, it opens the side menu, I click a link within the menu, and it goes back to my app. The menu button then doesn't fire anymore. Originally when I had with mmenu, it seemed to be missing the click event associated with mmenu. With sidr, it seems to be there, but nothing happens.

I've set up my jquery like this

Rails 4: how to use $(document).ready() with turbo-links

Example sidr

<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've already set up my application.js with jquery turbolinks gem e.g.

//= 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?

Answer 1

Here are some thoughts:

1) Make sure that you have your javascript includes in the head and not the bottom of the body. Since Turbolinks reloads the body every time, you would be reloading the same javascript and probably reinitializing duplicate listeners.

2) With the jquery.turbolinks gem, you should only need $(ready) and not $(document).on('page:load', ready). That is theoretically what jquery.turbolinks does for you.

3) Is ready firing at all? Did you put a console.log or alert in there to see?

4) Are you loading things through ajax or something after the DOM is ready? If so, you'll need to call .sidr() manually whenever it actually appears on the page, even if it is after DOM ready.

Answer 2

I'm using jquery.sidemenu.js which is a mmenu jQuery plugin compatible with Turbolinks.

https://github.com/kami30k/jquery.sidemenu.js/

Answer 3

Try this.

Install 'jquery-turbolinks' https://github.com/kossnocorp/jquery.turbolinks

then simply

//= 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 it helps. At least it worked fine for me.

Answer 4

I have the same problem with Mmenu and Turbolinks. And I've done as evanbikes describes. Disabling turbolinks and Mmenu works. But when enabling it it just doesn't work after clicking a link in the menu. Everything else works, all our js-code. So this must be something that has to do with Turbolinks.

https://github.com/karlingen/rails4_mmenu

https://github.com/BeSite/jQuery.mmenu/issues/41

Would love to use Mmenu, but it's impossible at the moment with Turbolinks.

Answer 5

After much frustration, I finally discovered that someone made a pull request on the GitHub repo for this exact issue. It hasn't been merged as of the time of this answer, but it's a quick fix, and it works like a charm!

https://github.com/artberri/sidr/pull/183/files

Answer 6

I know it's been a while, but want to leave an updated solution fro somebody who might be looking.

Mmenu developers added wrappers to support various frameworks, including turbolinks: mmenu framework wrappers

So now, all you need to do to solve this turbolinks bug is to download latest version of mmenu from their site or github repo and include the file located in dist/wrappers/turbolinks after your main mmenu file.

In case you include them manually, it's gonna look 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 are using sprockets, like this:

//= require jquery.mmenu
//= require jquery.mmenu.turbolinks

Answer 7

There is a way to fix this issue. From Turbolinks Doc - Opting out of Turbolinks you can add data-no-turbolink attribute to disable turbolink on that particular div tag. So modify your code as below and it will work without any issue.

<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>