CODEWITHSUNDEEP
javascriptruby-on-railsturbolinks
Pre-alpha
Pre-alpha

Reputation: 295

Execute JS every time on the event of turbolinks load in Rails 5 app

I would like to execute a few lines of js every time turbolinks is loaded(i.e, the page is loaded), not the js from cache, but would like to force run it before the event of turbolinks load, every time. Is that possible?

I'm trying to get rid of FOUC here, by hiding the html body and doing this in app.js.coffee

$(document).on 'turbolinks:load', ->
    document.body.style.visibility = 'visible'

But the FOUC starts kicking in after the 3rd or 4th time of reloading the page.

To see this live in action, here is a link to the website.

Upvotes: 5

Views: 1973

Answers (2)

Pre-alpha
Pre-alpha

Reputation: 295

So, FOUC coupled with turbolinks can be very irritating. What we finally did to fix it was hide the entire body with an inline stye and added a script tag within the body:

<script type="text/javascript">
        document.body.style.visibility = 'visible'
</script>

This ensured that when turbolinks is in action it loads up only the body of the HTML, hence having a script run within the body made sure that the js ran every time there was a turbolinks load.

Upvotes: 1

Joe Woodward
Joe Woodward

Reputation: 453

Turbolinks only loads when using links on that page, not when refreshing the page or navigating via url. If you want to run js when the page is loaded then use $(document).ready(function() { executable js here });

Upvotes: 2

Related Questions