質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2249閲覧

Turbolinks5の影響でブラウザボタンで移動した際にTag-it!の挙動がおかしくなる。

genn

総合スコア11

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2017/08/31 07:45

###前提・実現したいこと
個人でRuby on Rails5でアプリを作成しております。

投稿ページ(new)でJqueryプラグインのTag-it!を使ってタグの投稿を実現したいと考えています(Turbolinks5も導入)。

###発生している問題・エラーメッセージ

通常のページ移動で投稿ページに行った場合にはTag-itは問題なく動作しております。

ただ、Turbolinks5を導入し、

投稿ページに行く → ブラウザの戻るボタンで戻る → ブラウザの進むボタンで再び投稿ページへ

という移動をした際に、Tag-it!が2重に動作して?(?)、DOMが二重で生成されてしまいます。

###試したこと

jQuery

1document.addEventListener("turbolinks:before-cache", function() { 2 $('#return-checked').attr('data-return-mark', ''checked); 3});

このような形でTurbolinks5がキャッシュを取る前にマークを付けて、条件分岐を行い、Tag-it!が2重に読み取られないようにしてみても(当たり前なのですが)今度はTag−itが動作をしなくなるという別のエラーが出てしまいました。

また、2重に生成されてしまう部分を強引に削除してもうまくは動きませんでした。

for(var i = 0 ; i < tagitNew.length ; i++){ if(i == 1){ $(".tagit-new").eq(i).remove(); } }

Turbolinks5で用意されている

Jquery

1Turbolinks.clearCache()

を呼べばうまく動作はするのですが、全体のキャッシュが失われてしまうようなのでこれがベストなのか悩んでおります。

部分的にイベントを再読込するような方法はあるものなのでしょうか?

当方JqueryもRailsも初心者で個人で行っているため、言葉の使い方におかしなところがあるかと思いますが何か対処法をご存知の方はご教示願えますと幸いです。

また、Tag-itに関わらず、Turbolinks5を使っていらっしゃる方はブラウザボタンの移動の際にプラグインが2重に起動してしまう問題に対してどのような対処方法を取っていらっしゃるのかもご教示願えますと幸いです。

何か不備などありましたらご教示ください。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

Turbolinksのキャッシュからページを復元すると、

  • HTML要素→直前のをそのまま保存
  • JavaScriptイベントやjQueryのデータ→保存されない

というような状態になるため、jQueryウィジェットのたぐいはうまく動かなくなります。

多少手間かもしれませんが、「turbolinks:before-cacheのタイミングで、ウィジェットを削除して元のHTMLに戻しておく」というのが、対応策としてはいいのではないかと思います。

投稿2017/08/31 09:20

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

genn

2017/08/31 12:32

なるほどです。 方向性は合っていたようで安心しました。 turbolinks:before-cacheの際に元のHTMLに戻しておく動作を試してみます! 丁寧なご回答が頂けて感動しました!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問