Rails 5/jQuery: On click touchstart event not working

Question

I'm trying to use a bourbon/refills componenet (sliding_panel) and I have on('click touchstart') event. I'm using this for my navigation menu. The event will work just fine on first page load but after that will stop. The event uses toggleClass to show and hide the menu. I'm wasn't sure if this was a turbolinks problem so I did some digging and found the jquery-turbolinks gem. I went through the installation instructions but same outcome. Has anyone else had this problem?

Code below:

_navbar.html.erb

<button type="button" class="js-menu-trigger sliding-panel-button">
 Click for Sliding Panel
</button>

<nav class="js-menu sliding-panel-content">
 <ul>
  <li><%= link_to 'Users', users_path %></li>
  <li><a href="javascript:void(0)">Item 2</a></li>
  <li><a href="javascript:void(0)">Item 3</a></li>
 </ul>
</nav>

<div class="js-menu-screen sliding-panel-fade-screen"></div>

sliding_panel.js

$(document).ready(function(){
 $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
 $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
 e.preventDefault();
 });
});

sliding_panel.scss

.sliding-panel-content {
  $action-color: #477DCA !default;
  $dark-gray: #333 !default;
  $sliding-panel-border-color: $dark-gray;
  $sliding-panel-background: lighten($sliding-panel-border-color, 5%);
  $sliding-panel-color: #fff;
  $sliding-panel-border: 1px solid $sliding-panel-border-color;
  $sliding-panel-background-hover: $action-color;
  $sliding-panel-color-hover: #fff;
  $sliding-panel-background-focus: lighten($sliding-panel-background, 5%);

  @include position(fixed, 0 auto 0 0);
  @include size(220px, 100%);
  background: $sliding-panel-background;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transform: translateX(-220px);
  transition: all 0.25s linear;
  z-index: 999999;

  ul {
    padding: 0;
    margin: 0;
  }

  li {
    list-style: none;
  }

  li a {
    border-bottom: $sliding-panel-border;
    color: $sliding-panel-color;
    display: block;
    font-weight: bold;
    padding: 1em;
    text-decoration: none;

    &:focus {
      background-color: $sliding-panel-background-focus;
    }

    &:hover {
      background-color: $sliding-panel-background-hover;
      color: $sliding-panel-color-hover;
    }
  }

  &.is-visible {
    transform: translateX(0);
  }
}

.sliding-panel-fade-screen {
  @include position(fixed, 0);
  background: black;
  opacity: 0;
  transition: all 0.2s ease-in-out;
  visibility: hidden;
  z-index: 999998;

  &.is-visible {
    opacity: 0.4;
    visibility: visible;
  }
}

.sliding-panel-button {
  cursor: pointer;
  display: inline-block;
  outline: none;
  padding: 10px 16px;
  position: relative;

  img {
    height: 1.3em;
  }
}

These are exact copied exactly from the bourbon/refills site here.

I've added `data-turbolinks="false"` to the `nav` tag and it's working more that just once but not on all pages. I'm confused. — BB123, May 20 '18 at 23:17

score 1 · Answer 1 · answered May 21 '18 at 12:11

1

You shouldn't listen to ready event, but to page:load event. So, the code will be something like this:

$(document).on('page:load', function(){
 $('.sliding-panel-button,.sliding-panel-fade-screen,.sliding-panel-close').on('click touchstart',function (e) {
 $('.sliding-panel-content,.sliding-panel-fade-screen').toggleClass('is-visible');
 e.preventDefault();
 });
});

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

Hope it helps.

answered May 21 '18 at 12:11

Alvaro Inckot

695
9
29

1

that makes the sliding panel not work at all. But I think that might be putting me on the right track. – BB123 May 21 '18 at 14:53
@BB123 actually, I had experienced a lot of issues with jquery plugins that uses $.ready on Rails applications with turbolinks. good luck! – Alvaro Inckot May 21 '18 at 17:08

score 0 · Answer 2 · answered May 22 '18 at 21:01

0

Ok so I had Turbolinks ~> 5.2. I went back to Turbolinks ~> 5.0.1 and then loaded the jQuery like so: $(document).on('turbolinks:load', function() instead of using ready(). This SO post helped me figure out the solution.

answered May 22 '18 at 21:01

BB123

215
3
10

Rails 5/jQuery: On click touchstart event not working

2 Answers2