railsのscaffoldでremote formで送信後jsonを取得する

概要

みなさんこんにちはcandleです。
今回はrailsのformをremoteを使ってajaxした時に、
サーバに送った値をjavascript側で受け取る方法を紹介します。

ちなみに、私は下のサイトを参考にしました。

http://ericlondon.com/2014/01/25/ruby-on-rails-4-ajax-form.html

前提

適当なrailsプロジェクトがある

twitter bootstrap gemを使っても良いでしょう。
twiwtter bootstrap gemはデザイン名で見やすくする為に使うので、無くても構いません。
もしも、記事と同じ様に、進行したい場合は下のURLを参考にしてください。

scaffoldを作成する

scaffolを作成します。

rails g scaffold RemoteForm title:string description:text

作成されたら、マイグレーションファイルをデータベースに反映させます。

rake db:migrate

twitter bootstrap gemを入れている場合は
下のコマンドでデザインを適応させます。

rails g bootstrap:themed RemoteForms

これでscaffoldが完成しました。

フォームをajax化する

scaffoldで作成したフォームは普通にpostかputで送信してしまうので変更します。

app/views/remote_forms/_form.html.erbを開いて、以下の部分を変更しましょう。

<%= form_for @remote_form, remote: true, format: :json ,:html => { :class => 'form-horizontal remote_form' } do |f| %>

ここではリモートフォームの設定と、format jsonは多分jsonで値を返すみたいな意味だと思います。
新しくclassでremote_formというのを加えておきます。クラス名自体に意味はありません。

これでフォームのリモート化は完了です。

controllerを変更する

scaffoldで作成されたcreateアクションとupdateアクションはリダイレクトかjsonで値を返すことを想定しています。

今回の場合は送られたフォームが保存に失敗しても成功しても、jsonで返してほしいので、以下の様に変更します。

app/controllers/remote_forms_controller.rbを開きます。

まずはcreateアクションの以下の部分を変更します。

respond_to do |format|
  if @remote_form.save
    format.html { redirect_to @remote_form, notice: 'Remote form was successfully created.' }
    format.json { render json: @remote_form }
  else
    format.html { render action: 'new' }
    format.json { render json: @remote_form.errors.full_messages, status: :unprocessable_entity }
  end
end

変更している箇所はform_josnの所のみです。
同じ様にupdateアクションも変更します。

respond_to do |format|
  if @remote_form.update(remote_form_params)
    format.html { redirect_to @remote_form, notice: 'Remote form was successfully updated.' }
    format.json { render json: @remote_form }
  else
    format.html { render action: 'edit' }
    format.json { render json: @remote_form.errors.full_messages, status: :unprocessable_entity }
  end
end

これでコントローラー側から適切なjsonを返せるようになりました。

RemoteFormのバリデーションを設定する

saveの成功と失敗をテストしたいので、バリデーションを加えます。

一番簡単なバリデーションの未入力を禁止するものを設定します。
先ほど作成したscaffoldではtitleとdescriptionがありましたが、
手っ取り早くtitileカラムにのみそれを適応させます。

app/models/remote_form.rbを開きます。
以下の内容を加えます。

validates :title, presence: true

保存しましょう、これで、フォームからtitle未入力で値が送られてきた時はエラーを返します。

javascriptを記述して値を受け取る

最後に、javascriptを記述してフォームを送信して返ってきたjsonをうけとります。
coffeescriptで記述します。
app/assets/javascripts/remote_forms.js.coffeeを開きます。

$(document).on 'ready page:load', ->

  $(document).bind "ajaxSuccess", "form.remote_form", (event, xhr, settings) ->
    console.log xhr.responseJSON
    console.log xhr.responseJSON.title

  $(document).bind "ajaxError", "form.remote_form", (event, jqxhr, settings, exception) ->
    $.each jqxhr.responseJSON, (index, message) ->
      console.log message

説明しますと、送信が失敗したか成功したかで大きく分けます。
サーバから返ってきたjsonの値は成功したらxhr、失敗したらjqxhrに格納されています。

jsonは.resposeJSONで取得できます。
正直、これ微妙にjsonじゃない気がするけど。

上コードのconsole.logの部分はデバッグ用に表示する為に書いています。

これで値をjsonを受け取れる様になりました。

動かして確認する

それではデモとして動かしてみましょう。
サーバを起動して

bundle exec rails s

アクセスして、
http://localhost:3000/remote_forms/
適当なデータをアップデータします。

インスペクタを表示して、値を見てみます。
まずはエラーが取得出来るか試してみます。
titleを空にして送ってみます。

インスペクタにerrorが出てrails側が用意したエラーが表示されています。
「Title can’t be blank」というのがそれですね。

正しい値を送ってみます。
タイトルに値をいれて送ってみます。

最初の結果にはjsonの中身が表示されています。
次にjsonのtitleの中身が表示されています。
いい感じですね。

まとめ

私が参考にしたサイトにはもう少し、改良されたエラー表示やデータが保存された時の表示などがありましたが、最低限上のように記述しておけば簡単なコードで動くのでぜひやってみてください。