【Rails】プルダウンを選んだと同時に保存する【jQuery】

rails で "collenction_select" を使った時に、プルダウンで選んだ瞬間に内容が保存されたらいいなぁ、と思ったのですがなかなか沼ったので書き留めておきます。

フォームを作る

Railsドキュメントより

f.collection_select(メソッド名, オブジェクトの配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

ドキュメント、理解が難しい...

( ) の中身は左から、

• htmlに変換した時、この情報をnameやidにする
• プルダウンの元になる物。@users = User.all みたいに定義して、@usersを入れるとユーザーが全て表示
• 保存する部分。ユーザーのidを保存するなら、:id のように記述。
• プルダウンのテキスト。名前を表示するなら :name みたいにしておく。
• オプションは色々ある模様。今回、プルダウンが選ばれた時なので、:onchange を使います。

人それぞれのコードはあると思いますが、自分の場合こんな感じです。

    tbody
      - @workers.each do |w|
        tr
          th = w.name
          - @calender.each do |c|
            td
              = form_with(model: w, id: :select_form, method: :patch, local: true) do |f|
                = f.collection_select(:list_num, @work_lists, :id, :list_num,{include_blank: true, selected: :list_num}, {:onchange => "submit: this.form"})
                = f.hidden_field :list_day, value: c.strftime("%Y-%m-%d")

プルダウンの部分には、collection_select　の第一引数で何かしらid名が決まっていると思います。

この部分をターゲットとして、JSを実装します。

慣れているので自分はjQueryを使っています。

id名がついています。

$("#worker_list_num")が変化した時にsubmitされるようにJSを記述します。

$(document).on('turbolinks:load',function(){

  $("#worker_list_num").change(function(){
    $("#select_form").submit();
  })
});

プルダウンの値が変更されたら、フォームのサブミットがされるようにします。

これでプルダウンを選択すると同時に保存がされるようになりました。

collection_selectのオプションの書き方がずいぶん沼りました...

またボチボチ更新していきます。