ITANDI TECH BLOG

イタンジのスタッフブログです。イベントや技術情報などを発信しています。

Rails+jqueryでtoggleボタンを作る

こんにちわ、マイケル(日本人)です。 rails使い始めて3ヶ月経ちました、 最近やたらtoggleボタン作ることが多いのでrailsを使ったtoggleボタンの作り方を書いてみます。

一連の流れ

  • on/offを切り替えるボタンを設置
  • ボタンをクリックするとajaxでリクエスト飛ばして対象カラムのon/offを切り替える
  • リクエスト返ってきたらボタンの色をon/offの色に切り替える

まぁ管理画面とかによくあるon/offの切り替え機能ですね。

実装

さっそくHTMLから書いていきマッスル!あ、ちなみにhamlです

// html
%a.on_off_btn{class: (@model.flg ? "active": "", href: toggle_flg_path(@model), data: {remote: true, method: :patch}}
  クリックするとON・OFF切り替えるで(`・ω・´)

// css
.on_off_btn{
  background-color: #ddd;
  border: 1px solid #ccc;  
  color: #fff;
  border-radius: 5px;
}
.on_off_btn.active{
  border: 1px solid #0098d8;
  background-color: #0098d8;
}

ポイントはjquery-ujsを使ってるとこですね。 data-remote: trueってするだけで勝手にajax通信にしてくれます、methodも指定出来るしめっちゃ便利です。。 あとはcssのclassでactiveを定義して、こいつを付け替えしてボタンの色を変えちゃってます。 あ、指定のアクションをroutes.rbで定義するのを忘れないでね

// routes.rb
resources :models do
  patch "toggle_flg/:id", to: "models#toggle_flg", as: :toggle_flg
end

こんな感じで定義しておけばtoggle_flg_path(@model)でパスを取得できるよん

railsとjsの実装はこんな感じ

// rails
def toggle_flg
  @model = Model.find(params[:id])
  @model.toggle(:flg)
  render json:{data: @model, status: :ok, content_type: "text/json"}
end

// coffee
$(".on_off_btn").on("ajax:success", ->
  $(this).toggleClass("active")
).on("ajax:error", ->
  alert("通信エラーやで(´Д`)")
)

rails/jsともにtoggleとtoggleClassを使ってるところがpointですね。 toggleメソッドには更新対象のフィールドをシンボルで渡します。 こいつらが今の状態を勝手に判定してtrue/falseやclassの付け替えをやってくれます。 これだけのソース量でかけちゃうなんてすごい、流石railsですね〜。

参考サイト