jQuery で table をいじるときは tbody を忘れない

まぁ普通に会員の一覧検索みたいな管理画面を作っていて、普通に table でタグが組んであって、それを項目名をクリックしたらその項目名の昇順で並び替えたいとか、そんなような作業ってのは結構あるわけで。
なんかこう、テーブルのそのデータ行の部分だけを Ajax で load するようにしたいなと。
思ったわけです。

で、テーブルは普通に、こんな感じであって、

<table id="result">
  <tr>
    <th>ID</th>
    <th>氏名</th>
    <th>メールアドレス</th>
  </tr>
  <tr>
    <td>1</td>
    <td>山田</td>
    <td>yamada@・・・.jp</td>
  </tr>
  <tr>
    <td>2</td>
    <td>佐藤</td>
    <td>sato@・・・.jp</td>
  </tr>
</table>

このデータ行の部分だけを Ajax で書き換えたいってことなんですが、どうすればいいですかね？
テーブルの2行目以降を一旦 remove() とかで消して、そこに append() すりゃいいんじゃないかとか、いろいろ悩んでみたんだけど、結局、tbodyを使うってことで解決しました。
先のテーブルを以下のように書き直します。

<table id="result">
  <thead>
    <tr>
      <th>ID</th>
      <th>氏名</th>
      <th>メールアドレス</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>山田</td>
      <td>yamada@・・・.jp</td>
    </tr>
    <tr>
      <td>2</td>
      <td>佐藤</td>
      <td>sato@・・・.jp</td>
    </tr>
  </tbody>
</table>

そして、

$(document).ready(function() {
  $('#result tbody').load(
    './result.php',
    $('form').serialize(),
    function(data){}
  );
});

と jQuery で書きます。
result.php にはページ中のフォームの値がGETで渡っていくので、それを適当に処理してクエリーをかけて結果を元に

    <tr>
      <td>1</td>
      <td>山田</td>
      <td>yamada@・・・.jp</td>
    </tr>
    <tr>
      <td>2</td>
      <td>佐藤</td>
      <td>sato@・・・.jp</td>
    </tr>

の部分だけを出力してやればよいです。

jQuery、Form Plugin を使って、file upload する、ファイルを選択したら自動でその画像が表示されるようにする

まあ、とにかくファイルアップロード系のプラグインってのはあるようでないようで、これというのがない。
もう探し疲れたよ、ほんとに。
ファイルのアップロードのインターフェースはこういうのがいいんだ、っていう部分で人によって意見が違いすぎるんだよな、結局。
だから作者によって考えてることが全然別々で。
ということで、一番シンプルで、機能がなくて、ただアップロードできるだけ、というものを考えてみた。
まず、HTML側はこうする。

<form id="upload" method="post" action="form.php" >
  <input type="file" name="sample" id="sample" />
  <img id="sample_img" src="img/sample.jpg">
</form>

sample.jpg はデフォルトの画像で用意してあって、最初から表示されているんだけど、ファイル参照で別の画像を選べばそれに置き換わる、というようなものを作ろうってことだ。

まず、
http://www.malsup.com/jquery/form/
こちらから Form Plugin を入手して、読み込む。

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

で、ファイル選択したらファイルアップロードをする php に処理を渡せばいいので、

$(document).ready(function() {
  $("input#sample").change(function(){
    var options = { 
      url:       'upload.php',
      dataType:  'xml', 
      success:   processXml 
    }; 
    $('form#upload').ajaxSubmit(options); 
  });
});

こんな感じに書く。中味は全部 form プラグインの記述。dataType で xml を選ぶのが味噌だ。
json にすると動かないので注意。
ajaxSubmit で form の action 先を upload.php に変更して、自動でサブミットしてくれる。

ということなので upload.php を書く。
いや、これはまあ、普通に $_FILES を使ったファイルアップロード処理を php で書けばいいだけなので詳細は略。
普段自分が使ってるやつでやってくれ。
なんやかんや処理した後に、

header('Content-type: text/xml'); 
echo <<<END
<root>
  <status>$status</status>
  <file_path>$file_path</file_path>
  <emes>$emes</emes>
</root>
END;

というように xml で結果を返す。上記では $status に成功したかどうか、$file_path にアップロードした画像を保存したファイルのパス、$emes にエラーメッセージ、を格納しているつもりである。

で、アップロードに成功すると

success:   processXml 

とあるように、processXml に処理が渡るので、processXml をごりごり書く。

function processXml(responseXML) {
  var status = $('status', responseXML).text();
  if (status == 'success') {
    var file_path = $('file_path', responseXML).text(); 
    $('#sample_img').attr('src', file_path);
  } else {
    var emes = $('emes', responseXML).text();
    alert(emes);
  }
}

xml のデータは

$('status', responseXML).text()

というような書き方で取得できる。
ので、jQuery の .attr を使って画像のパスを書き換える。

$('#sample_img').attr('src', file_path);

これでオッケーだ。
あとは好きなようにいじればよしと。