Ajax:保存orエラーを返す

今回はフォームの入力欄で入力が完了したら自動で（Ajax）で保存を行う。
ただしすでにあるモノを更新するというテイで！


controller

  def index    
　　@users = User.order('id ASC')
  end

  # Ajax
  def update
    @user = User.find(params[:id])
    @user.update_attributes params[:user]
    @users = User.order('id ASC')
    render :index
  end

次にviewのindexです。

<div class="success"><p></p></div>
<% @users.each do |c| %>
   <tbody>
      <tr>
        <%= form_for
           (c, url: { action: :update, id: c.id }, 
            html: { id: "user_#{c.id}" }
           ) do |form| 
        %>
        <td><%= c.name %></td>
        <td>
           <%= form.text_field :display_name, class: "edit_display_name" %>
        </td>
        <td>
          <%= form.check_box :shown, { class: "shown" }, true, false  %>
        </td>
        <% end %>
      </tr>
   </tbody>
<% end %>

これで１つの箱の中にいくつものformがある設定ができました。
次にAjaxです。

assets/javascript内に自由にファイルを作成します。

$(function(){   $(".edit_display_name").change(function() {
    var val = $(this).val();
    var val2 = $(this).parent().next().children("input").val();
    var target = $(this.form).attr("action");
    if (val == "") {
      alert("表示名を入力してください。");
      $(this).css("background-color","yellow");
      return
    }
    $.ajax({
      type: "PUT",
      url: target,
      data: {
        user: {
          display_name: val,
          shown: val2
        }
      },
      success: function() {
        $("div.success").show()
        $("div.success p").html("「表示名」を" + val + "に変更しました。");
      }
    })
  })

• val,val2でformのvalueを取ってきて、targetのactionを指定しています。
• それをdataに入れて、urlにtargetを入れます。
• updateなのでもちろんtypeはPUTです。
• その前にエラーの場合、今回はvalが空の場合はalertを出し、returnしています。
• エラー時にはcssでフォームを黄色にしています。
• もし問題なく進めば、successが呼ばれて、メッセージが呼ばれます。
• div.successはdisplay:noneに指定しておけば以上のsuccessでOKです。