手取り足取りプログラミング

cloud9、railsについて自分がつまずいた所を詳しく説明します。なぜなら一番読み返すのは自分だから。

【Rails】Ajaxを使用する

はじめに

概要

地方をドロップダウンリストで選択するとAjaxで都道府県一覧を取得し表示するというサンプルを作ります。
例)四国地方を選択すると徳島、香川、愛媛、高知が表示される

バージョン

ruby 2.3.0
Rails 4.2.5

前提条件

下記記事内のCloud9でテンプレートとして用意したプロジェクトをクローンして作成しています。
yonayonaru.hatenablog.com

ソースコード

ソースコードはERBとSlim両方用意していますが、ブログ内ではSlimで説明します。
ERB版
github.com

Slim版
github.com

データの用意

地方と都道府県のモデルを用意します。
データはCSVで投入します。

モデル作成

モデルを作成し、マイグレーションを行います。

rails g model area name
rails g model prefecture area:references name
rake db:migrate

CSVファイル

地方のCSVファイルです。
dbフォルダ直下にファイルを新規作成して下記内容をコピーしてください。

db/area.csv

北海道
東北
関東
中部
関西
中国
四国
九州

都道府県のCSVファイルです。
dbフォルダ直下にファイルを新規作成して下記内容をコピーしてください。

db/prefecture.csv

1,北海道
2,青森県
2,岩手県
2,宮城県
2,秋田県
2,山形県
2,福島県
3,茨城県
3,栃木県
3,群馬県
3,埼玉県
3,千葉県
3,東京都
3,神奈川県
4,新潟県
4,富山県
4,石川県
4,福井県
4,山梨県
4,長野県
4,岐阜県
4,静岡県
4,愛知県
5,三重県
5,滋賀県
5,京都府
5,大阪府
5,兵庫県
5,奈良県
5,和歌山県
6,鳥取県
6,島根県
6,岡山県
6,広島県
6,山口県
7,徳島県
7,香川県
7,愛媛県
7,高知県
8,福岡県
8,佐賀県
8,長崎県
8,熊本県
8,大分県
8,宮崎県
8,鹿児島県
8,沖縄県

seeds.rbにcsvデータをどのテーブルのどの項目に入れるか記述します。

db/seeds.rb

require "csv"

CSV.foreach('db/area.csv') do |data|
  Area.create(name: data[0])
end

CSV.foreach('db/prefecture.csv') do |data|
  Prefecture.create(area_id: data[0], name: data[1])
end

下記コマンド実行でデータが投入されます。

rake db:seed

コントローラ

コントローラを作成します。

rails g controller home index

  • index で初期表示の設定をします。地方と都道府県を全部取得します。
  • select_area はドロップダウンリストで選択した地方に属する都道府県を取得します。

class HomeController < ApplicationController
  def index
    @areas = Area.all
    @prefectures = Prefecture.all
  end
  
  def select_area
    if params['area'].empty?
      @prefectures = Prefecture.all
    else
      @prefectures = Prefecture.where(area_id: params['area'])
    end
  end
end

ビュー

メインのHTML

Ajaxで処理するためにselect_tag に remote:true を指定し、リンク先をurlに記述します。また、prompt:全国 を指定することで全都道府県を表示させる選択肢を追加します。
renderの部分がドロップダウンリストで選択した都道府県が表示される箇所です。

app/views/home/index.html.slim

= select_tag('area', options_from_collection_for_select(@areas,:id,:name), id: 'area', prompt: '全国', data:{remote:true, url:url_for(action: :select_area)})
#result
  = render 'prefecture_list'

Ajaxで更新するHTML

app/views/home/_prefecture_list.html.slimを新規作成します。
都道府県を表示する部分です。
このhtmlがAjaxの処理によって書きかわります。

app/views/home/_prefecture_list.html.slim

table.table
  thead
    tr
      th No.
      th 県名
  tbody
    - @prefectures.each.with_index(1) do |prefecture, index|
      tr
        td = index
        td = prefecture.name

Ajax処理で結果が返るJS

Ajaxで処理するとhtmlではなく、javascriptに結果が返ります。
コントローラのselect_areaで処理したので、select_area.js.slimに結果が返ります。
下記のjavascriptはidがresultの部分を _prefecture_list.html に書き換えています。

app/views/home/select_area.js.slim

| $(function(){
| $('#result').html("#{escape_javascript(render 'prefecture_list')}");
| });

Routes設定

ドロップダウンリストで選択した時のURLを設定します。
ついでにrootも設定しておきます。

config/routes.rb

Rails.application.routes.draw do
  get 'home/index'
  get 'home/select_area'
  
  root 'home#index'
end

完成

以上で完成です。
完成時の画面を貼っておきます。

初期表示
f:id:yonayonaru:20170225090331p:plain

関東を選択
f:id:yonayonaru:20170225090355p:plain