Rails inline javascript and turbolinks

Question

I need to embed an external form in my app which uses the following code:

<script type="text/javascript" src="https://company.formsite.com/forms/js.php/form_name"></script>

Code is place in the a view and only loads once the page is refresh and not on the initial visit. I'm sure this has something to do with Turbolinks, but how do I resolve this with an external source?

I've looked into:

<script type="text/javascript" data-turbolinks-track="true" src="https://company.formsite.com/forms/js.php/form_name"></script>
<script type="text/javascript" data-turbolinks="false" src="https://company.formsite.com/forms/js.php/form_name"></script>

But have had no luck.

William Kennedy · Accepted Answer · 2019-05-23 12:33:16Z

From the docs....

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

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

In practice, you can just have your script in the body tag.

If's it's anything more complex or perhaps by external form, you mean something like an iframe, I've done the following in the past for trustpilot. Granted, it's not a form but it might help you on your way.

In the head tag, I have put

<head>
  <!-- TrustBox script -->
  <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
  <!-- End Trustbox script -->
</head>

Then in the body, I have a div

  <div  id='trustpilot' class="trustpilot-widget" data-locale="en-UK" data-template-id="53aa8912dec7e10d38f59f36" data-businessunit-id="58dd0d0a0000ff00059f84bc" data-style-height="130px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5">
    <a href="https://uk.trustpilot.com/review/company" target="_blank">Trustpilot</a>
  </div>

Finally, I use a Turbolinks event listener to activate the iframe.

document.addEventListener("turbolinks:load", function () {
    // find trustpilot header
    var trustpilotHeader = document.getElementById('trustpilot-header');
    if (trustpilotHeader) {
        window.Trustpilot.loadFromElement(trustpilotHeader);
    } else {
       // handle element not found
        return;
    }

    var trustpilot = document.getElementById('trustpilot');
    if (trustpilot) {
        window.Trustpilot.loadFromElement(trustpilot);
    } else {
                  // handle element not found
        return;
    }
});

If you are unsure if it's OK to use window.Trustpilot.loadFromElement then here's Trustpilot support article about it: support.trustpilot.com/hc/en-us/articles/…

DollarChills · Accepted Answer · 2019-05-24 04:39:44Z

2

I ended up adding the following conditional to my header. Not sure if there is a better way, but it solved my issue for me.

<head>
  <% if current_page?(controller: 'controller_name', action: 'page_name') %>
    <meta name="turbolinks-visit-control" content="reload">
  <% end %>
</head>

answered May 24, 2019 at 4:39

DollarChills

1,0961 gold badge16 silver badges35 bronze badges

Comments

ife brand · Accepted Answer · 2021-09-26 19:53:40Z

0

I resolved a similair issue by disabling Turbolink for the page that make use of an inline script. from the the doc:

Turbolinks can be disabled on a per-link basis by annotating a link or any of its ancestors with data-turbolinks="false".
<a href="/" data-turbolinks="false">Disabled</a>

<div data-turbolinks="false">
  <a href="/">Disabled</a>
</div>
Links with Turbolinks disabled will be handled normally by the browser.

answered Sep 26, 2021 at 19:53

ife brand

517 bronze badges

Collectives™ on Stack Overflow

Rails inline javascript and turbolinks

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related