Turbolinks 5 [Loading Javascript Properly]

Question

I am hosting a sample application to clearly elaborate by problem. Try to visit the site, then follow another page link, using browser back return to previous page then to another page using browser forward button(You can continue move back and forth) "Hope you see what i am talking about"

Code: Previous page

<h1>Form page</h1>
<div id="rating-form">
  <label for="rating-form"> Rating </label>
</div>

Loading my js code using

$(document).ready(function(){});

doesn't work until full page load( as i espect). So i followed this solution

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

  $('#rating-form').raty({

    path: '/assets/',
    scoreName: 'review[rating]', 
    score: function(){
        return 0
    },


  });

});

resulted to the bug in sample application

Using gem 'jquery-turbolinks' from this solution doest work with turbolinks 5

So how can i handle this problem ?

score 1 · Accepted Answer · answered Oct 12 '16 at 06:10

1

You need to destroy it before page navigation:

$(document).on('turbolinks:before-cache', function() {
  // you will need to save current state (score, etc) before
  // doing this and load it during turbolinks:load
  $('#rating-form').raty('destroy')
});

answered Oct 12 '16 at 06:10

nanaya

450
4
5

It works . . . so basically am using 'turbolinks:load' and 'turbolinks:before-cache' – Emmanuel Mtali Oct 12 '16 at 11:25

score 0 · Answer 2 · answered Oct 10 '16 at 21:24

I think what you want is load event instead.

$(window).load(function() {

  $('#rating-form').raty({

    path: '/assets/',
    scoreName: 'review[rating]', 
    score: function(){
        return 0
    },


  });

});

This is because turbolinks:visit is triggered after every visit (including back and forward), whereas window.onLoad is triggered only after initial page load (which is only triggered right after you click the link (as it sends an AJAX request, and that is the only time when onLoad is called after AJAX response has been loaded, therefore not including back and forward, as back and forward do not actually send a request when turbolinks-enabled).

turbolinks:visit works most of the time (only if the function defined you have there is idempotent of each page change, i.e. you don't add/remove DOM elements or update JS history). But since what .raty(...) function does is it appends (5 images + hidden input field) then your code above basically continuously appends these into #rating-form

The rating images wont show up until i refresh the whole page . . . . — Emmanuel Mtali, Oct 11 '16 at 11:22

Turbolinks 5 [Loading Javascript Properly]

2 Answers2