電子書籍の厳選無料作品が豊富!

jQueryのload関数を使って、日付を元にランダムな10ケタの数字を生成するプログラム(rand.php)を読み込み、そのプログラムの結果をcontentsというIDのdiv内にappendToしたいのです。
そして、5秒ごとにrand.phpを読み込み、そのたびにcontentsというIDのdiv内に結果をappendToしたいのです。
イメージとしては下記のような感じになります。


$(function(){
function loadAndAppend(){
$("div#contents").apendTo(load("rand.php"));
setTimeout(loadAndAppend, 5000);
};
loadAndAppend();
});


しかし、これだとうまくいきません。apendTo(load("rand.php"))という部分がおかしいのでしょうが、これをどう直せばよいか分かりません。

ぜひとも解決法を教えていただけないでしょうか。

A 回答 (3件)

上書きではなく追加したいということであれば、私ならajax()関数を使います。



回答#2でご指摘があったsetInterval()関数の件(すいません。これは私の記載ミスでした)を踏まえて、

function loadAndAppend(){
$.ajax({
url: "rand.php",
method: "get",
dataType: "text",
success: function(data, dataType) {
$("div#contents").append(data + "<br/>");
}
});
};
setInterval(loadAndAppend, 5000);

このような感じに記述します。

#私自身、load()関数やget()関数よりもajax()関数ばかり使用しているので上記のソースコードの方が書きやすいです・・・。
    • good
    • 1
この回答へのお礼

こちらを参考にしたところ、見事にうまくいきました!
これがコールバック関数ってヤツなのでしょうか。
なにはともあれ、ありがとうございました!!

お礼日時:2009/05/28 18:43

よくわかりませんが…



一発でうまくいかないのであれば、非表示の要素(取り込み専用の要素)に一度取り込んでから、その内容を目的の要素の内容に付け加えてあげればいいのでは?

ついでながら、setIntervalで自分自身を呼び出すと、処理が累積して発生するはずだと思いますが??
ちなみに、以下の簡単なテストを実行してみると、表示のインクリメントは0、1、2、3…ではなく、0、1、2、4、8、16…となるので多重処理になっていることがわかります。
    • good
    • 0
この回答へのお礼

確かにその方法もありましたね!
ご教示ありがとうございます。

お礼日時:2009/05/28 18:42

jQueryのload()関数は外部ファイル(htmlなど)をロードするだけでなく、それをDOMにappendするところまでやってしまいます。



ですので、この場合のload()関数の使い方は

$("div#contents").load("rand.php");

の記述でいいはずです。

また、
>5秒ごとにrand.phpを読み込み
とありますが、この場合setTimeout()関数ではなくsetInterval()関数を使用します。

それをふまえて全体を書き直すと、

function loadAndAppend(){
$("div#contents").load("rand.php");
setInterval(loadAndAppend, 5000);
};

のようになります。
    • good
    • 0
この回答へのお礼

ご返答ありがとうございます!

試しに実験してみたところ、5秒ごとに読み込まれるのですが
appendというより上書き(html()のような挙動)になってしまいます。

読み込まれるごとに、その結果をどんどん追加(上書きではなく)していきたいのです。

loadしたものを変数に代入してappend、というのも試してみたのですが、こちらもうまくいきませんでした。

$(function(){
function loadAndAppend(){
var myData = $.load("rand.php");
$("div#contents").apendTo(myData);
setInterval(loadAndAppend, 5000);
};

不可能ではないと思うのですが。。。

お礼日時:2009/05/28 11:36

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


おすすめ情報