Coffeescript/Javascript works only first time for page:load and ready event and it doesn't work after refreshing page in Ruby on rails

Question

I had created my coffeescript file to execute a JQuery plug-in: slick for demonstrating information through carousel in a project built by Ruby on Rails 4. The coffeescript file only works when the page finishing first load and continue to works. But it doesn't work as I expected after I pressing key combination: command+R of browsers to force the page to refresh. What I expect for them is to do carousel as usual just like what they do before I pressing the key combination.

I put slick directory, which is a JQuery plugin, under vendor/assets directory and include it in app/assets/javascripts/application.js and app/assets/stylesheets/application.css .

In app/assets/javascripts/application.js,

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require slick.min
//= require d3
//= require c3
//= require turbolinks
//= require_tree .

In app/assets/stylesheets/application.css,

*= require_tree .
*= require slick
*= require slick-theme
*= require c3
*= require_self

I have installed above gems through adding them to Gemfile and command:bundle install. Stylesheets and javascript files are combined to application.css and application.js respectively. They are also placed at header and end of body of a web page respectively.

Below content is part of my coffeescript file.

$('.slideshow').slick
  slidesToShow: 9
  slidesToScroll: 9
  rows: 2
  variableWidth: true
  autoplay: true
  autoplaySpeed: 2000

Rendering of content of my web page are placed at jsFiddle . Sorry, I can't put the code at stackoverflow because it will make this question length over limit of 30000 characters.

I have tried solutions described in jQuery code works the first time and the second time works only after page refresh, and change my coffeescript file to below forms: These solutions don't work for me.

Form 1:

slide_show = ->
  $('.slideshow').slick
    slidesToShow: 9
    slidesToScroll: 9
    rows: 2
    variableWidth: true
    autoplay: true
    autoplaySpeed: 2000
$(document).on('ready page:load', slide_show())

Form 2:

slide_show = ->
  $('.slideshow').slick
    slidesToShow: 9
    slidesToScroll: 9
    rows: 2
    variableWidth: true
    autoplay: true
    autoplaySpeed: 2000
$(document).ready(slide_show())

I found the event of slideshow class inside my web page, which was bound by Form 1 and Form2, disappeared after refreshing the page. The event was bound to that class actually when the page finishing its first-time load and ready.

My environment are Ruby 2.3 and Rails 4.2.5.1 with turbolinks 2.5.3 enabled. I want to know why it doesn't work after the page has been refreshed and how to make it work as normal.

Coffeescript/Javascript works only first time for page:load and ready event and it doesn't work after refreshing page in Ruby on rails

0 Answers0