Multi tool use

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

$(document).ready(...)

$(document).on('turbolinks:load', ...)

1 Answer
1

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:

turbolinks:load

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

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.