チェックボックスのboolean値をajaxリクエストでデータベース更新を手軽にするやり方です。
準備
Gemfile
|
1 |
gem 'jquery-rails' #rails5はこれを入れないとjQueryが動きません |
bundle install します
assets/javascripts/application.js
|
1 |
//= require jquery #rails5はこれを入れないとjQueryが動きません |
サンプルとしてscaffoldでユーザーを作ります。
|
1 |
$ rails g scaffold User name:string private:boolean |
Boolean型のカラムにデフォルト値と、null: falseを追加します。
db/migrate/20xxxxx_create_users.rb
|
1 2 3 4 5 6 7 8 9 10 |
class CreateUsers < ActiveRecord::Migration[5.1] def change create_table :users do |t| t.string :name t.boolean :private, default: true, null: false t.timestamps end end end |
$ rails db:migrate を実行します。
Routes
post送信するためのルートを追加します
config/routes.rb
|
1 2 3 4 5 6 7 |
Rails.application.routes.draw do resources :users do collection do post '/:id/user_private' => 'users#user_private' end end end |
|
1 2 3 4 5 6 7 8 9 10 11 |
$ rails routes Prefix Verb URI Pattern Controller#Action POST /users/:id/user_private(.:format) users#user_private users GET /users(.:format) users#index POST /users(.:format) users#create new_user GET /users/new(.:format) users#new edit_user GET /users/:id/edit(.:format) users#edit user GET /users/:id(.:format) users#show PATCH /users/:id(.:format) users#update PUT /users/:id(.:format) users#update DELETE /users/:id(.:format) users#destroy |
Controllers
特にrenderの記述はしなくても勝手にやってくれます。後からカラムを追加した方はprivateをストロングパラメータに追加することを忘れないように
app/controllers/users_controller.rb
|
1 2 3 4 5 6 7 8 9 10 |
def user_private @user = User.find(params[:id]) @user.private = !@user.private @user.save end private def user_params params.require(:user).permit(:name, :private) end |
Views
app/views/users/show.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<p> <strong>Private:</strong> <%= check_box_tag 'user[private]', true, @user.private, { onchange: '$(this).data("params", "user[private]=" + this.checked)', data: { url: user_url + '/user_private/', method: :post, remote: true } } %> <span id="true_or_false"> <%= render :partial => 'private_boolean' %> </span> </p> |
remote: trueを指定します。これでajaxリクエストになりますね。
アクションと同名のjs.erbファイルをレンダーしてくれます。
app/views/users/user_private.js.erb
|
1 |
$('#true_or_false').html('<%= j(render("private_boolean")) %>'); |
分かりやすくするためにクラスをつけています。
app/views/users/private_boolean.html.erb
|
1 2 3 4 5 |
<% if @user.private == true %> <span class="true">true</span> <% else %> <span class="false">false</span> <% end %> |
app/assets/stylesheets/users.scss
|
1 2 3 4 5 6 7 8 9 10 11 12 |
span { padding: 0 3px 1px; color: #ffffff; border-radius: 25px; .true { background-color: #79d460; } .false { background-color: #f18686; } } |
以上です。間違っていたら教えていただけるとありがたいです。
