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?

had a link that didn't encase in code. no it should be simple-menu apparently http://www.berriart.com/sidr/# — Clam, Jan 08 '15 at 04:21
the only complete fix i have been able to find is to disable turbolinks completely... would love to get it reintegrated and have both working — Clam, Jan 12 '15 at 20:59
i'm having the exact same problem. upon initial page load, the menu works as expected. but clicking a link from within the menu somehow breaks the menu on the next page. what's weird is that other turbolinks requests work fine. i can click on a link outside the menu, and the menu will open up on the next page. very frustrating. — tddrmllr, Mar 10 '15 at 00:28

score 2 · Answer 1 · answered Feb 06 '15 at 19:22

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.

Frank Etoundi · Answer 2 · 2017-09-18T14:24:35.857

1

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.

edited Sep 18 '17 at 14:24

answered Apr 25 '15 at 19:48

Frank Etoundi

336
3
10

hey your answer really helped on a problem i was struggling on. thank you! – Student22 Aug 21 '17 at 04:46

score 0 · Answer 3 · answered Jan 13 '15 at 03:18

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.

thanks for the reply. i'm going to look into this again next week! — Clam, Jan 16 '15 at 21:18

score 0 · Answer 4 · answered Mar 10 '15 at 00:38

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

score 0 · Answer 5 · answered Apr 20 '15 at 06:00

0

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

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

answered Apr 20 '15 at 06:00

ztbuz

63
1
1
5

score 0 · Answer 6 · answered Sep 30 '15 at 07:22

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>

score 0 · Answer 7 · answered Mar 20 '16 at 21:06

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

Rails with mmenu/sidr with Jquery and Turbolinks issue

7 Answers7