次に、in_place_editor_fieldで同一画面編集出来る様にする。

ruby rails

今のままじゃ登録しか出来ないので、編集出来るようにします。
ここからはAjaxぽく、マウスクリックでデータを書きかえれる様にします。
(削除は次の段階でやりますよ。)


6.javascriptのファイルを設定する。
Ajaxを利用するので、Ajax用のjavascriptファイルを読み込む様にします。
app/views/test/list.rhtmlに、<%= javascript_include_tag :defaults %>
と言う一行を追加します。(上から五行目)

<html>
  <head>
    <title>
      名簿管理アプリケーション
    </title>
    <%= javascript_include_tag :defaults %>
  </head>
  <body>
    <hr>
    <ul id="members">
      <% for @member in @members %>
      <li id="member_<%=@member.id %>" >
         名前 : <%= h @member.name  %> /
         どんな人 : <%= h @member.atitude %>
      </li>
      <% end %>
    </ul>

    <hr>
    <%= form_tag :action => 'add' , :id => @member %>
      <p>名前 <%= text_field 'member','name' %>どんな人 <%= text_field 'member','atitude' %><%= submit_tag '登録' %></p>
    <%= end_form_tag %>
  </body>
</html>


7.in_place_editor_fieldを登録する。
in_place_editor_fieldと言うrailsのヘルパーを使います。
クリックするとその場所を編集出来るajaxを提供してくれる優れ物です。
なんと1行で済むんですね……。

中盤の名前やどんな人の項目を、 hでの表示からin_place_editor_fieldに置き換えます。
保存するときのボタンの名前をsave_textで指定してます。
取り消しの際のリンクの名前はcancel_textで。

<html>
  <head>
    <title>
      名簿管理アプリケーション
    </title>
    <%= javascript_include_tag :defaults %>
  </head>
  <body>
    <hr>
    <ul id="members">
      <% for @member in @members %>

      <li id="member_<%=@member.id %>" >
         名前 : <%= in_place_editor_field :member, 'name'     , {}, { :save_text=>"保存", :cancel_text=>"取消" } %> /
         どんな人 :  <%= in_place_editor_field :member, 'atitude'     , {}, { :save_text=>"保存", :cancel_text=>"取消" } %>
      </li>

      <% end %>
    </ul>

    <hr>
    <%= form_tag :action => 'add' , :id => @member %>
      <p>名前 <%= text_field 'member','name' %>どんな人 <%= text_field 'member','atitude' %><%= submit_tag '登録' %></p>
    <%= end_form_tag %>
  </body>
</html>


8.Webサーバ側の受け皿を作る
今のままだとブラウザ上で編集出来る様に見えるのですが、実際にはDBに
登録するWeb側の受け皿がないので、コントローラーにそれを作ります。
やっぱりこちらもrailsの機能を使うと1項目あたり1行ですみます。
in_place_edit_for を記載します。

コントローラーこんな感じになります。
今回は2項目メンテ画面用意してるので、2行目、3行目を追加しています。

class TestController < ApplicationController
  in_place_edit_for :member, :name
  in_place_edit_for :member, :atitude

  def list
    @members = Member.find(:all)
  end

  def add
    @member = Member.new(params[:member])
    @member.save! unless @member.name.blank?

    redirect_to :action=>'list'
  end
end

これでクリックでの編集は完成です。