こんにちわ、マイケル(日本人)です。 rails使い始めて3ヶ月経ちました、 最近やたらtoggleボタン作ることが多いのでrailsを使ったtoggleボタンの作り方を書いてみます。
一連の流れ
まぁ管理画面とかによくある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ですね〜。
