All threads / https://gorails.com/episodes/webpacker-javascript-in-rails-6
Ask A Question

Notifications

You’re not receiving notifications from this thread.

https://gorails.com/episodes/webpacker-javascript-in-rails-6

Ted Leason asked in General

Hi Chris
Thanks for the Episode.

I'm new for Rails 6, and when I followed your lesson I've got the multi dubbing of the flatpickr on going the back page in a browser. Like this: see screenshot
Then I've added to the application.js file:

document.addEventListener("turbolinks:before-cache", () => {
  $("[data-behavior='flatpickr']").each(function(){ 
    this._flatpickr.destroy()
   })
})

Is it the right way to overcome this?
Or have I done some code mistake that cause my problem?

Best regards,
Ted

Hey Ted,

Honestly, I'd just recommend using stimulus-flatpickr as it will do the setup/teardown automatically for you when Stimulus connects. Makes for very simple Turbolinks compatibility.

As for just fixing the flatpickr instance when it renders cache, you're exactly right. That's what you'd want. It will make sure it tears down before Turbolinks caches the HTML and that's exactly what you need.

Stimulus makes it a piece of cake, so I've started moving to creating Stimulus components that do the setup/teardown rather than listening to turbolinks events. It works with Turbolinks, with the additional benefit that it will also setup/teardown whenever you dynamically add HTML to the page from an AJAX request or websocket which is really nice.

Thank you very much for such fast and appropriate response.

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 70,078+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2023 GoRails, LLC. All rights reserved.