その場で編集＋登録機能

Perl prototype.js

巷じゃ有名なprototype.jsですが、クックブックという名目でしばらくサンプルコードを作っては掲載してみたいと思います。難易度の高いことを紹介するというよりはもっと具体的に「XXXという機能を実装するにはこうすれば良い」という一例を載せられれば良いなぁ、と。

記念すべき第１回目は「その場で編集＋登録機能」です。じゃじゃーん。100SHIKI | 世界のアイデアを日替わりでさんの開発しているシンプルな目標管理ツール | check*pad.jpでも利用されている機能で割とAjaxっぽく、かつ実装も難しくない（そう、あなたにはprototype.jsがあるんだから）。これこそいろんなやり方があると思う（少なくとも私がやった事あるもので２通りある）。

実際に動作するサンプルは以下で見れます。
screenshot
http://ya-lab.main.jp/prototype-js-cookbook/01_where_you_see_is_where_you_edit/demo.html

<html>
<head>
  <script type="text/javascript" src="prototype.js"></script>
  <script type="text/javascript">
    // span.viewer_textの文字を編集可能にする。
    // 仕組みはdiv.viewerとdiv.editorを交換（Element.toggle）するだけ。
    function make_it_editable() {
      $('text_editor').value = $('viewer_text').innerHTML;
      Element.toggle('viewer', 'editor');
    }
		
    // form.editor_formを非同期でサブミットする。
    function save_text() {
      // Form.serializeで引数のフォームの中にあるinput等をURLに付加できる形の
      // 文字列に直してくれる（例：text=sample&id=10）。
      var params = Form.serialize($('editor_form'));
      
      // 実際はこのURLをフォームの内容で保存するCGIにする。
      // 現在はダミーとして自分自身を指定（つまり何もしない）。
      var url = 'sample1.html'; 
      
      // 下記関数の意味は「urlへparamsを引数にGETし、終了後
      // showResponse関数を呼び出すこと」となる。
      // つまり、下記のよなリクエストを投げることになる。
      // demo.html?text=（入力値）&id=10
      new Ajax.Request (
        url,
        {
          method: 'POST',
          parameters: params,
          onComplete: showResponse
        }
      );
			
  }
		
		
    // 非同期の保存が終了したときに、画面を更新する。
    // このように画面を更新する際はユーザに変更を知らせる為に
    // 何らかのアクションを起こすのがユーザに優しい
    // （参考：Yellow-fade technique）
    function showResponse() {
      Element.update($('viewer_text'), $('text_editor').value);
      Element.toggle( 'editor', 'viewer');
    }
  <script>

</head>
<body>

<div id="viewer">
  <a href="#" onclick="make_it_editable(); return false;">[Edit]</a>
  <span id="viewer_text">This is source text.</span>
</div>
<div id="editor" style="display:none">
  <form id="editor_form" onsubmit="save_text(); return false;">
    <a href="#" onclick="save_text(); return false;">[Save]</a>
    <input type="hidden" name"id" value="10" />
    <input id="text_editor" type="text" name="text" value="" size="50">
  </form>
</div>
</body>
</html>

質問等々、歓迎です。
もっと良いやり方がある？　さらに歓迎です。私にも勉強させてください。