CODEWITHSUNDEEP
turbolinksmaterial-design-lite
John Pollard
John Pollard

Reputation: 3899

MDL menu does not work when user clicks back button when using Turbolinks

So here is code to show the mdl menu. They click the edit button and then a menu appears. 

<button class="mdl-button mdl-js-button mdl-js-ripple-effect" id="edit-button"> edit</button>
<ul id="edit_menu"  class="mdl-menu mdl-js-menu mdl-js-ripple-effect" for="edit-button">
  <li>change</li>
  <li>do something else</li>
</ul>

Unfortunately the drop down no longer works when the user clicks the back button to the page with the drop down. I can't seem to reinitialize MDL. If i click on a link in the menu and then hit the back button, the drop down will be left open. Any ideas?

Related issue was that turbolinks breaks the MDL stuff but this code fixes it. Unfortunately it does not fix the drop down when a user hits the back button

document.addEventListener 'turbolinks:load', ->
  componentHandler.upgradeDom();

Upvotes: 3

Views: 655

Answers (3)

John Pollard
John Pollard

Reputation: 3899

This actually fixed my issue

<meta name="turbolinks-cache-control" content="no-cache">

Upvotes: 0

Aaron
Aaron

Reputation: 145

I was experiencing the same issue. Apparently this happens only when using the back button (not the forward button). My workaround was to add a javascript file with the following content

document.addEventListener "turbolinks:load", ->
  componentHandler.upgradeDom()

@addEventListener "popstate", (e)->
  Turbolinks.visit(e.target.location)

Upvotes: 1

John Pollard
John Pollard

Reputation: 3899

This was my workaround solution to solve the problem. It was only happening for 1 specific page so I found a unique string in the URL and then overrode the back button to do a turbolinks visit. 

window.addEventListener "popstate", (e)->
  if  (e.target.location.pathname.indexOf('customize_board')  != -1 )
    Turbolinks.visit( e.target.location)

I hope that at least can help someone out so their page isn't broken.

Upvotes: 1

Related Questions