びびすけ さんのページ

3件の日記があります。

あさ (2007/02/16 07:25) 基本データ 0 comment

体重：62.4kg

昨日は4km走ったのに減ってないぞ
って4kmくらいじゃ誤差の範囲内だな
（消費カロリー：4*62=248kcal、体脂肪換算：248/7.2 = 34.4g）

jQuery.js な掲示板 (2007/02/16 07:31) 0 comment

昨晩から jQuery.js を使って Ajax な掲示板を作成している＞http://vivi.dyndns.org/AjaxTest/bbsJQ.html
prototype.js 版と基本的に機能は同じだが、確認エリアを表示するとき、show("slow") イフェクトを使ってみた
最初見た人はおもしろいと思うのではないだろうか。
れいたんのアドバイスもあって、なんとか動くようになったのだが、いろいろはまったので忘れないように記述しておく

(1) id名に日本語は使えない
  prototype.js の場合は <div id="メッセージ表示領域></div> にように、id名に日本語が使えたが、
  jQuery.js では使えないみたいだ。英語のid名を使用しないといけない。
  文字コードは EUC-JP でのみ試した。UTF-8 でも後でためしてみる。ソースも調査してみよう。

(2) フォームに入力された文字列を取り出すには val() メソッドを使う
  prototype.js では <input type="text"> は $("id名").value、<textarea> は $("id名").innnerHTML で取り出せる
  jQuery.js は $("#id名").html() で <textarea> の内容を取り出すことができない。
  <input type="text"> も $("#id名").valuel() で取りだとうそしたがうまくいかなかった。
  検索してもなかなかサンプルがみつからなかったが、Visual jQuery の DOM - Atributes を見て、val() メソッドを発見した。
  <input type="text"> も <textarea> も入力された文字列を取り出すのは $("id名").val() が正解だった。

(3) load() で php プログラムを呼び出すと、キャッシュされているデータが返されることがある
  おいらの環境では問題なく動いていたのだが、さね氏（IE6）に動作確認してもらうと、
  投稿したコメントが一覧に反映されない（つまり投稿されてない）とのこと。
  しかし、おいらが見るとちゃんと投稿されている。
  $("#id名").load("getBBS.php", function(html, status) { ...} ); でコメント一覧をサーバからゲットしていたのだが、
  引数が指定されていない load() は GET メソッドになり、キャッシュが使われる可能性が極めて高くなるらしい
  （さんくす＞れいたん）
  そこで、$("#id名").load("getBBS.php", "{foo: 'bar'}", ...); のようにダミー引数を指定するか、
  $.post("getBBS.php", function(html, status) { ...} ); に変更すればおっけーだった。
  ダミーの引数を書くのは趣味に合わないので、$.post() を用いることにした

jQuery.js な掲示板 (2) (2007/02/16 08:41) 0 comment

次は 各コメント（レス）に返信できるようにしてみる

(1) コメントの番号、名前、日付時刻の後に【返信】ボタンをつける
function コメント一覧表示() の中で、<input type="button" class="res" id="res番号" value="返信" />
を出力するようにする。class 指定しているのは、$(".class").click() でまとめてイベントハンドラを登録するためだ。
idにコメント番号を含めているのは、ハンドラで $(this).attr("id") でコメント番号を取り出すためだ
また、コメント部分にも id="cmnt番号" をつけておき、ハンドラから参照可能にしておく

(2) イベントハンドラの処理
$(this).attr("id") でコメント番号を取り出し、refID に設定する
$("#cmnt" + refID).html() でコメント内容を取り出す。
HTMLなので、HTML要素はエスケープされ、改行は "<br>" になっている
function 改行引用記号付加(text) で 行分割し、引用記号を付け、改行は "\n" に変換
それを $("#cmntText").val(text) で引用コメント番号をつけて設定してあげればオケ
ついでに、window.scroll(0,0); で入力エリアが見えるように気を配っておく

出来上がったのがこれだ＞http://vivi.dyndns.org/AjaxTest/bbsJQ2.html
だいぶ使いやすくなったぞ

3件の日記があります。