Profile picture Schedule a Meeting
c a n d l a n d . n e t

Rails Turbolinks not firing JS on load

Dusty Candland | | rails, turbolinks, javascript

I've run into this a couple of times lately. Everything works fine when refreshing a page, but when navigating there via turbolinks the JS doesn't work.

Here's how I'm handling it.

Layout

Turbolinks likes to have any JavaScript in the head tag so I add a yield tag to the head in the layout.

head
  ...
  = yield :js_head
  ...

View

Then in the view I use content_for to grab the JS and drop it in the header.

= content_for :js_head do
  script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.min.js" type="text/javascript" data-turbolinks-track="reload"

  javascript:
    function loadChart() {
      var ctx = document.getElementById('activityChart').getContext('2d');
      var chart = new Chart(ctx, {
        // The type of chart we want to create
        type: 'line',

        // The data for our dataset
        data: {
          labels: #{raw @activity.map{|x| x[0].strftime("%b %d")}.to_json},
            datasets: [{
              label: "Searches",
                borderColor: 'rgb(0, 132, 255)',
                data: #{raw @activity.map{|x| x[2]}.to_json},
            },
            {
              label: "Clicks",
                borderColor: 'rgb(255, 99, 132)',
                data: #{raw @activity.map{|x| x[1]}.to_json},
            }]
        },

        // Configuration options go here
        options: {}
      });
    }

    function unloadChart() {
      document.removeEventListener('turbolinks:load', loadChart);
      document.removeEventListener('turbolinks:click', unloadChart);
    }

    document.addEventListener('turbolinks:load', loadChart);
    document.addEventListener('turbolinks:click', unloadChart);

Seems like in addition to the placement, I need to hook into the turbolinks:load event and turbolinks:click event.

The load event fires the code on page load, both when refreshing and when navigating there with a link.

The click event is used to unbind the events so they don't continue to fire on other pages.

Seems like a common issue that would come up a lot, but maybe not.

Webmentions

These are webmentions via the IndieWeb and webmention.io. Mention this post from your site: