CODEWITHSUNDEEP
javascriptjqueryruby-on-railsturbolinks
byCoder
byCoder

Reputation: 9184

Rails turbolinks - window.load not document.load

I have such code in one .js file:

var ready;
ready = function() {
var galleries = $('.car-gallery').adGallery({
    loader_image: '../assets/loader.gif',
    slideshow: {
    enable: false,
    autostart: false,
    speed: 5000,
    start_label: 'Start',
    stop_label: 'Stop',
    // Should the slideshow stop if the user scrolls the thumb list?
    stop_on_scroll: true, 
    // Wrap around the countdown
    countdown_prefix: '(', 
    countdown_sufix: ')',
    onStart: function() {
      // Do something wild when the slideshow starts
    },
    onStop: function() {
      // Do something wild when the slideshow stops
    }
  }});
};
$(document).ready(ready);
$(document).on('page:load', ready);

but in my rails 4 app i use turbolinks, and sometimes is so,that images are not loaded, but document is ready and i can't start ('.car-gallery').adGallery

maybe there are any ways to don't reload page, and use window.load with turbolinks? and how?

Upvotes: 0

Views: 1086

Answers (1)

Richard Peck
Richard Peck

Reputation: 76784

Apart from JQueryTurbolinks, as shown in the comments, it seems your JQuery is not binding to the page load events as it should

I would recommend this code (if you want to keep a native solution):

var galleries = function() {
  $('.car-gallery').adGallery({
    loader_image: '../assets/loader.gif',
    slideshow: {
    enable: false,
    autostart: false,
    speed: 5000,
    start_label: 'Start',
    stop_label: 'Stop',
    // Should the slideshow stop if the user scrolls the thumb list?
    stop_on_scroll: true, 
    // Wrap around the countdown
    countdown_prefix: '(', 
    countdown_sufix: ')',
    onStart: function() {
      // Do something wild when the slideshow starts
    },
    onStop: function() {
      // Do something wild when the slideshow stops
    }
  });
};
$(document).on('page:load ready', galleries);

Can you try adding this:

var alert = function(){
    alert("loaded");
};
$(document).on("page:load ready", alert);

Update

After a conversation, we found this was the solution which worked best:

#JS
$('.car-gallery').adGallery({
    loader_image: '../assets/loader.gif',
    slideshow: {
    enable: false,
    autostart: false,
    speed: 5000,
    start_label: 'Start',
    stop_label: 'Stop',
    // Should the slideshow stop if the user scrolls the thumb list?
    stop_on_scroll: true, 
    // Wrap around the countdown
    countdown_prefix: '(', 
    countdown_sufix: ')',
    onStart: function() {
      // Do something wild when the slideshow starts
    },
    onStop: function() {
      // Do something wild when the slideshow stops
    }
  });

#view
<%= link_to "link", path, data: { no-turbolink: true } %>

Upvotes: 1

Related Questions