【Rails】RailsでAjaxを使用する簡単手順【Ajax】

この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。

RailsでAjaxを使用する手順を簡単に説明します。

例として作る機能

選択されたユーザーの年齢が表示されるようなものを作成します。

例として使うデータ

	>> User.all
	=>[
	　　　　#<user id: 1, name: “ユーザー1”, age: 11>,
	　　　　#<user id: 2, name: “ユーザー2”, age: 22>,
	　　　　#<user id: 3, name: “ユーザー3”, age: 33>
	]
	

1. routes.rbにajax用のアクションを追加

vim config/routes.rb

	resources :users
	

↓

	resources :users do
	  get :search_user, on: :collection
	end
	

2. controllerにajax用のアクションを追加

	def search_user
	  @user = User.find(params[:user_id])
	  render layout: false
	end
	

3. viewにタグを記述

下記の3つを記述します。

①イベントを走らせるセレクトボックス

②ユーザー名を入れる用のタグ

③jsでpostする用のフォーム

vim app/views/users/index.slim

	#select_user
	  = select :user, :name, [[“ユーザー１", 1], [“ユーザー2", 2], [“ユーザー3", 3]], include_blank: true
	
	p このユーザーの年齢
	p#user_age
	
	div style=‘display: none;’
	  = form_tag(search_user_users_path, remote: true, method: :get) do
	    = text_field_tag :user_id
	    = submit_tag
	

4.フォームをpostするjsを記述

vim app/assets/javascripts/users.coffee

	$ ->
	  # セレクトボックスが変更されたらフォームをsubmit
	  $(‘#select_user select’).change( ->
	    $user_id = $('#user_id')
	    $user_id.val($(this).val()) # 選択されたユーザーのIDをパラメータとして渡す
	    $user_id.closest('form').submit()
	  )
	

4.ajax用のアクションのview(js)を記述

vim app/views/users/search_user.coffee

	$('#user_age’).text(‘<%= @user.age %>')
	

以上で完了です。

これでセレクトボックスを変更するたびにユーザーの年齢が変更されると思います。