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 ?

nanaya · Accepted Answer · 2016-10-12 06:10:29Z

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, 2016 at 6:10

nanaya

5004 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Emmanuel Mtali Over a year ago

It works . . . so basically am using 'turbolinks:load' and 'turbolinks:before-cache'

Jay-Ar Polidario · Accepted Answer · 2016-10-10 21:24:19Z

0

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

answered Oct 10, 2016 at 21:24

Jay-Ar Polidario

6,60318 silver badges30 bronze badges

1 Comment

Emmanuel Mtali Over a year ago

The rating images wont show up until i refresh the whole page . . . .

Collectives™ on Stack Overflow

Turbolinks 5 [Loading Javascript Properly]

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related