All threads / Rails repeats Webpacker packages if I go backwards (OwlCarousel, DataTables)
Ask A Question

Notifications

You’re not receiving notifications from this thread.

Rails repeats Webpacker packages if I go backwards (OwlCarousel, DataTables)

cratag asked in Rails

Hello there.

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?

Does anyone know anything, maybe I can provide more info?

This was the quick fix, for if anyone views this post in the future:

Add this line in your application

<head>
#in app/views/layouts/application.html.erb
...
<meta name="turbolinks-cache-control" content="no-cache">
...
</head>
Join the discussion

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

Join 64,380+ 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

    © 2022 GoRails, LLC. All rights reserved.