Javascript in turbo-frame response not executed anymore?

1

Hi,

I’m rendering a javascript chart in a turbo frame. The frame renders some html and inline javascript.

turbo-frame#sales_flow
  .row
    .col-12
      .card
        .card-header VERKOOP LAATSTE 30 DAGEN
        .card-body
          canvas#myChart height="300" width="1000"

  javascript:
    var ctx = document.getElementById('myChart').getContext('2d');
    var myChart = new Chart(ctx, {
      type: 'line',
      data: {

This worked, until… today I updated to

  • stimulus-rails (0.2.1)
  • stimulus-rails (0.2.3)
  • turbo-rails (0.5.7)
  • turbo-rails (0.5.9)

And the javascript in de turbo frame response no longer seems to get executed. Can anyone confirm this behaviour?

2

Today I reverted to the previous versions of turbo en stimulus and it worked again, so it has something to do with updating these packages.

I found this issue: https://github.com/hotwired/turbo-rails/issues/125

Looks like the same problem.

3

Are you also using stimulus? It would be much better if you attached a controller to your tag inside the turbo frame and created your chart in the connect method.

4

Hi Lee, yes, I am and also thought about this approach, but this code was/is from the pre-turbo era and it worked this way. Maybe I will move the js code to a stimulus controller.

5

I think that’s the best idea. I’m looking at setting up a controller to use SortableJS now, but without webpacker so I need to figure out which .JS file to put where.

I’m guessing the .esm.js file into /assets/javascripts/libraries?

6

With any luck, this should be fixed with Turbo 7.0.0.-beta.5.

That said, I got impatient and found that making Stimulus controllers for loading things like this was trivial. I’ve done it with Flatpickr, Videojs, and Plyr with no issues.

7

Thanks all! I’m using this workaround for now: