Rails js script code not working while screen back due to Turbolinks-CodePudding

In my rails app there is a JS script in partial view

 const f2s = window.document.createElement("script");
   f2s.defer = true;
   (f2s.src = "https://face2.oktium.com/face2widget.js"),
   (f2s.onload = function () {
   new window.Oktium(face2params).init();
   new window.Oktium(face2paramsMobile).init();
 }),
 document.head.appendChild(f2s);

it works fine when page load for first but when comes again from back or another page which have same code its not working. How can I work that with turbolinks?

CodePudding user response：

You should wrap your JS code inside

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

CodePudding user response：

From turbolinks docs

Working with Script Elements

Your browser automatically loads and evaluates any <script> elements present on the initial page load.

When you navigate to a new page, Turbolinks looks for any <script> elements in the new page’s <head> which aren’t present on the current page. Then it appends them to the current <head> where they’re loaded and evaluated by the browser. You can use this to load additional JavaScript files on-demand.

Turbolinks evaluates <script> elements in a page’s <body> each time it renders the page. You can use inline body scripts to set up per-page JavaScript state or bootstrap client-side models. To install behavior, or to perform more complex operations when the page changes, avoid script elements and use the turbolinks:load event instead.

Annotate <script> elements with data-turbolinks-eval="false" if you do not want Turbolinks to evaluate them after rendering. Note that this annotation will not prevent your browser from evaluating scripts on the initial page load.

Loading Your Application’s JavaScript Bundle

Always make sure to load your application’s JavaScript bundle using <script> elements in the <head> of your document. Otherwise, Turbolinks will reload the bundle with every page change.
<head>
  ...
  <script src="/application-cbd3cd4.js" defer></script>
</head>
If you have traditionally placed application scripts at the end of <body> for performance reasons, consider using the <script defer> attribute instead. It has widespread browser support and allows you to keep your scripts in <head> for Turbolinks compatibility.

You should also consider configuring your asset packaging system to fingerprint each script so it has a new URL when its contents change. Then you can use the data-turbolinks-track attribute to force a full page reload when you deploy a new JavaScript bundle.

You can wrap your JS script inside such handler inside script tag in the head

<script defer>
  document.addEventListener('turbolinks:load', () => {
    // your code here
  })
</script>