CODEWITHSUNDEEP
ruby-on-railsturbolinks
quyetdc
quyetdc

Reputation: 1585

Rails 6 Turbolink problem on turning back previous page

I am working on a Rails 6 and Bulma carousel extensions, and I have a problem when turning back the page that has js code

My app/javascripts/packs/application.js


require("turbolinks").start();
window.BulmaCarousel = require('bulma-extensions/bulma-carousel/dist/js/bulma-carousel');

My html

<div class="hero-carousel" id="carousel-photo"></div>

<script>
  BulmaCarousel.attach('#carousel-photo', {
    slidesToScroll: 1,
    slidesToShow: 1
  })
</script>

If I refresh the browser, or when I visit the page the first time, my bulma carousel works normally. However, when I go to other pages, then turning back the page, it goes wrong. How can I attach this piece of JS code on turbolinks onload

Upvotes: 0

Views: 1870

Answers (1)

Abhishek Aravindan
Abhishek Aravindan

Reputation: 1482

try turbolinks:before-cache

$(document).on("turbolinks:before-cache", function() {
  BulmaCarousel.attach('#carousel-photo', {
   slidesToScroll: 1,
   slidesToShow: 1
  })
});


 $(document).on("turbolinks:load", function() {
  BulmaCarousel.attach('#carousel-photo', {
   slidesToScroll: 1,
   slidesToShow: 1
  })
});

add both to your application.js file instead of adding it in script tag

Upvotes: 1

Related Questions