Tuesday 31 July 2018

How to keep state of page submitted through Turbolinks with Rails 5 + jQuery

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