Search code examples
ruby-on-railsrubyruby-on-rails-6webpacker

Rails repeats Webpacker packages if I go back one page (OwlCarousel, DataTables)

I've got a Rails app that repeats packages if I go back to the page that's supposed to render them. For instance, my OwlCarousel with two images will multiply and have the carousel navigation superimposed on top of the previous one.

Brief GIF to explain

#app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>CRISPR Citrus</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    
   
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 

  </head>

  <body>
    <%= yield %>
  </body>


</html>

#app/javascript/packs/application.js
import Rails from "@rails/ujs"
import Turbolinks from "turbolinks"
import * as ActiveStorage from "@rails/activestorage"
import "channels"

require("jquery");

import '@popperjs/core'

//Owl Carousel
import "../js/owlcarousel"

Rails.start()
Turbolinks.start()
ActiveStorage.start()

#app/javascript/js/owlcarousel.js
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel';
import "owl.carousel/dist/assets/owl.theme.default.min.css"      
      $( document ).on('turbolinks:load', function() {
        $(function () {
            $('.owl-carousel').owlCarousel(
              {
                items: 1,
                loop: true,
                autoplay: true
              }
            );
          });
      })

#owl carousel is simply called like this:
      <div class="owl-carousel owl-theme owl-theme-dark">
        <%= image_tag "tmp/test_genotyping.png", alt:"", width:""%> 
        <%= image_tag "tmp/test_genotyping.png", alt:"", width:""%> 
      </div>

I think maybe OwlCarousel has a way to destroy itself before reloading, which I could add in owlcarousel.js but I think that would be a way to "patch" an ongoing issue. Is this supposed to happen?

Issue persits

Solution

  • If anyone reads the post in the future, this was the solution I found.

    Simply add:

    #in app/views/layouts/application.html.erb

<head>
...
    <meta name="turbolinks-cache-control" content="no-cache">
...
</head>

    I couldn't make it work for specific view, so I simply did it for every view in the app. If anyone knows how to implement it directly within a view, I'm interested.