3
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

リロードしないとjavascriptが動かない[Rails]

Last updated at Posted at 2020-05-23

はじめに

 Qiita初心者のため、自分が困っていたことが簡単に解決した方法や、豆知識みたいなものから上げていこうと思います。ゆくゆくは実装の一通りの流れなど細かく投稿していきます

 初心者(自分もですが)のみなさんは一度はなったことがあると思います。
 javascriptを実装したのにリロードしないと反映されない。今回はその簡単な解決方法をご紹介します。

リロードしないと反映されない時のコード

 jsでスライドショーを実装(これだけだとリロードしないと画面に反映されない)
 ``` Ruby

$(function () {
  $('.anime').slick({
    dots: true,
    autoplay: true,
    autoplaySpeed: 2000,
  });
});

解決方法

 こうなる原因はgem にあります
 Railsのデフォルトで入っている'turbolinks'です。
 じゃこれを消せばいいとおもっちゃいますが、このgemはページのロードをする際に少しだけ早くしてくれるため消しにくいのです😭
 しかし、このgemを無効化しない限りjsはきちんと動いてくれません。
 そこでJSファイルに下記コードを入れることによって解決できます。

 document.addEventListener("turbolinks:load"
, function () {
    $(function () {
      $('.anime').slick({
        dots: true,
        autoplay: true,
        autoplaySpeed: 2000,
      });
    });
  })

document.addEventListener("turbolinks:load")を入れることによって、turbolinksを無効化できます!!
3
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?