Rails + Ajax でエラーメッセージを実装する。

最近、同僚の人が、ajaxでエラーメッセージを実装していたので、勉強になりました。

ちなみに、ajaxで実装していたコメント機能に、エラーメッセージをつけるというものになります。

form viewにエラーメッセージを実装する

まず、エラーメッセージをform viewの中に実装しましょう。 このエラーメッセージは、scaffoldを実装する時にも、自動実装されるよくあるやつです。

【作業】

    <% if @comment.errors.any? %>
      <div id="error_explanation">
        <h2><%= pluralize(@comment.errors.count, "error") %> prohibited this comment from being saved:</h2>

        <ul>
          <% @comment.errors.full_messages.each do |message| %>
            <li><%= message %></li>
          <% end %>
        </ul>
      </div>
    <% end %>

【作業終わり】

<div id="error_explanation">

ajax処理のための、idを加えています。

controllerにエラーが出た時のajax処理を加える

コントローラーにエラーが出た時の、処理を加えます。

def create
  @comment = current_user.comments.build(comment_params)

  respond_to do |format|
      if @comment.save
        render :index, status: :created, notice: 'Comment was successfully created.'
      else
        render :error, status: :unprocessable_entity
      end
    end
  end

また、事前にviewにremote: :trueを加えてあるので、jsレスポンスがはしります。

viewのjs.erbを作成する

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

views/comments/index.js.erb

$("#comments_area").html("<%= j(render 'comments/index' %>");
$('#error_explanation').remove();
$(':text').val('');

views/comments/form.js.erb

$("#comment-form").html("<%= j(render 'comments/form') %>");

form.js.erbはエラーメッセージの時だけ、発火し、index.js.erbは発火するとエラーメッセージを消します。

これで、ajaxでエラーメッセージを実装することができます。

また、本文では、escape_javascriptをjと略しています。 qiita.com