CODEWITHSUNDEEP
javascriptjqueryhtmlruby-on-railssass
ptent
ptent

Reputation: 168

Rails 5 Jquery stops working on redirect

So I'm working with Rails 5.1 to create a web app and I'm using a CSS checkbox hack to open a navigation menu.

I have a button (on root_path) which, when clicked, uses Jquery to check the box from another area. It works when going to the page, but when I redirect to another page, it stops working. But the console still outputs true/false when I click the button logging whether the checkbox is checked or not. So the button functions seem to work on-click, but the checkbox doesn't show as checked.

I've spent a lot of time playing with the jquery, turning off turbolinks on the home button which refreshes, etc. Curious if anyone has a way to get around this or if rails 5 is finicky with this stuff.

Here is the snippet for the two buttons in _index.html.erb

  <div class="index__content--buttons">
    <%= link_to("Find Out More", root_path, :class => "btn btn--primary", data: { no_turbolink: true }) %>
    <%= link_to("Explore the Culture", "javascript:void(0)", :class => "btn btn--primary", :id => "navbtn") %>
  </div>

Here is the code from my _nav.scss:

  // functionality of nav box
 &__checkbox:checked ~ &__background {
    transform: scale(60);
  }

  &__checkbox:checked ~ &__nav {
    opacity: 1;
    width: 100%;
    z-index: 1500;
  }

  &__checkbox:checked ~ &__nav > &__list > &__item {
    visibility: visible;
  }

Here is the entire index.js

  $(document).ready(function() {
    const navigation = document.querySelector('.navigation');
    const navCheckbox = 
         navigation.querySelector('.navigation__checkbox');
    const navItems = navigation.querySelectorAll('.navigation__item');
    navCheckbox.checked = false;

    function uncheck(){ $(navCheckbox).prop('checked', false) }

    navItems.forEach(item => item.addEventListener("click", _ => 
          navCheckbox.checked = false));

    $(document).on("click", "#navbtn", function (){
       uncheck();
       console.log(navCheckbox['checked'] === true);

       $(navCheckbox).prop('checked', true);    
       console.log(navCheckbox['checked'] === true);
    });
});

It should be worth noting the actual checkbox button and label ALWAYS works. And the navItems for loop is to uncheck after a nav link is clicked.

Also I'm using jquery3 have the gem 'jquery-rails', application.js:

    //= require jquery3
    //= require jquery_ujs
    //= require turbolinks
    //= require_tree .

So why does this fail on a root_path redirect? Edit: just tested, it doesn't work after ANY redirect.

tldr: jquery works on first visit. Then doesn't check the checkbox (but logs correct state), on any redirect.

Thanks in advance

Upvotes: 0

Views: 672

Answers (1)

neydroid
neydroid

Reputation: 1951

This is probably caused because you have Turbolinks enabled, this requires special use of navigation events, instead of using jQuery ready event, you need to use turbolinks:load like this:

document.addEventListener("turbolinks:load", function() {
  // Here goes your jQuery ready code
})

Here is the link to the documentation if you want to know more about this behavior.

https://github.com/turbolinks/turbolinks#installing-javascript-behavior

Upvotes: 3

Related Questions