世界が幸せで在ります様に

ITエンジニアになりたい人・エンジニアの人にとって役立ちそうな商品を紹介するブログ

Rails5でSelect2を使うとき、ブラウザバックによるハマりポイント解消

今までTurbolinksは、様々なブログでOFFにしたほうがよい、といわれていた。

しかし、Turbolinks5などはネイティブに対してのメリットも強くなってきたため、使う機会も増えてきたんじゃあなかろうかと思う。仕組みは、公式を読み込めば仕様が理解できる。

github.com

 今回は、Turbolinks5とSelect2を使ったときに、ブラウザバックするとUIが崩れるというイシューが発生

解決方法は簡単で、Turbolinksのナビゲーションが把握できていれば問題ない。

 

例えば、以下のhamlファイルがある

ざっくりいうとransakとselect2を使って、検索しやすくしている。

= search_form_for @q, url: hospital_index_path do |f|
  = f.collection_select :area_id_eq, @areas, :id, :name_jp, { include_blank: '区を選んで下さい' }, { class: 'form-control searchable-area' }

 

既存では、以下のように書かれていた。

$(document).ready(function() {
  $('.searchable-area').select2({
    //省略
  })
})

この処理の想定では、readyにより、select2がちゃんと動くだろうと思われていたようだ。

 

実際は、以下のように書くのが良いと思われる

$(document).on('turbolinks:before-cache', function() {
  $('.searchable-area').select2('destroy')
})
$(document).on('turbolinks:load', function() {
  $('.searchable-area').select2({
    //省略
  })
})
turbolinks:load

ページ読み込み時に発火させ、select2の処理を行う。ただし、ここで一つ問題がある。turbolinksにより、それぞれのライフサイクルにおいてキャッシュしてしまうので、ページが変わるたびにこのselect2処理が起動してしまう。

要は、selectボックスがページの数だけ見た目上、生成されていくという問題が発生する。

turbolinks:before-cache

ライフライクルにおけるキャッシュを開始する前に発火する。そのタイミングで、一度select2をdestroyしておけば、先のページが変わるたびに古いselectボックスは消え、新しいselectボックスが生成される。

 

loadとbefore-cacheをうまく使い分ければ、select2に限らず他のjsライブラリの処理もコントロールすることができると思う。

 

※既存コードがjQueryのため、jQueryで書き直しているが、別にjQueryである必要はない。jsならeventlistnerに追加してやればよい。

 

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

 

 

プロフィールと免責事項