MW211 EXIT

devlog
jQuery/Ajaxまだまだ序の口
2012年01月01日
┌──────────────────────────────────────┐
│$time = date('s');                                                          │
│<span id="a">{$time}</span>                                                 │
└──────────────────────────────────────┘
とりあえず、上記みたいな感じで、
表示内容が刻々と変化するphpファイル(ajax.php)を用意する。
#刻々と変化するDBの値を取得したりするのを想定したダミーです。

で、jQueryは以下のような感じ。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(function(){                                                   │
│      $("#a").parent().load("ajax.php #a");                                 │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
「id=a」という範囲をloadして、「id=a」の一つ上の階層に読み出す。
すると、「id=a」に吐き出される。
そんな感じなのでしょうか。

「$.get」で書くとこんな感じ。
┌──────────────────────────────────────┐
│$(function() {                                                              │
│  setInterval(                                                              │
│    function(){                                                             │
│      $.get(                                                                │
│        "ajax.php",                                                         │
│        function(data){                                                     │
│          $("#a").html($("#a", data).html());                               │
│        }                                                                   │
│      );                                                                    │
│    },                                                                      │
│    3000  // 3秒でリロード                                                  │
│  );                                                                        │
│});                                                                         │
└──────────────────────────────────────┘
汎用性が高いかも。

「id=a」がtdタグ中のspanだったりして、tdタグの背景色が変わる場合は
以下のようなのをhtml()の行の部分に置き換えれ(追加すれ)ばいいみたい。
┌──────────────────────────────────────┐
│$("#a").parent().css("background-color",                                    │
│                     $("#a", data).parent().css("background-color"));       │
└──────────────────────────────────────┘
分類:jQuery