I'm trying to show/hide a section
when another element is clicked. Pretty simple stuff, and I got it to work fine. The problem is: this is a todo list; tasks are created and checked through Ajax (with Turbolinks, data remote etc), and when this happens, the show/hide action stops working until I manually reload the page again. It also loses track of the state of whether the section is hidden or not, even when I use localStorage, like so:
$(document).ready(function(){
if (localStorage.getItem("revealed?") === "true") {
$('#completed').removeClass('hide');
} else {
$('#completed').addClass('hide');
}
$('#show_completed').click(function(){
if (localStorage.getItem("revealed?") === "false") {
$('#completed').removeClass('hide');
localStorage.setItem("revealed?", "true");
} else {
$('#completed').addClass('hide');
localStorage.setItem("revealed?", "false");
}
});
});
I've tried every solution on the JS side that I could think of, and everything works to some extent, but they all still break when a task is submitted automatically.
I'm stumped. Is it some kind of behind-the-scenes interference between jQuery and Turbolinks? What am I missing?
from How to keep state of page submitted through Turbolinks with Rails 5 + jQuery
No comments:
Post a Comment