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"))という部分がおかしいのでしょうが、これをどう直せばよいか分かりません。
ぜひとも解決法を教えていただけないでしょうか。
No.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()関数ばかり使用しているので上記のソースコードの方が書きやすいです・・・。
こちらを参考にしたところ、見事にうまくいきました!
これがコールバック関数ってヤツなのでしょうか。
なにはともあれ、ありがとうございました!!
No.2
- 回答日時:
よくわかりませんが…
一発でうまくいかないのであれば、非表示の要素(取り込み専用の要素)に一度取り込んでから、その内容を目的の要素の内容に付け加えてあげればいいのでは?
ついでながら、setIntervalで自分自身を呼び出すと、処理が累積して発生するはずだと思いますが??
ちなみに、以下の簡単なテストを実行してみると、表示のインクリメントは0、1、2、3…ではなく、0、1、2、4、8、16…となるので多重処理になっていることがわかります。
No.1
- 回答日時:
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);
};
のようになります。
ご返答ありがとうございます!
試しに実験してみたところ、5秒ごとに読み込まれるのですが
appendというより上書き(html()のような挙動)になってしまいます。
読み込まれるごとに、その結果をどんどん追加(上書きではなく)していきたいのです。
loadしたものを変数に代入してappend、というのも試してみたのですが、こちらもうまくいきませんでした。
$(function(){
function loadAndAppend(){
var myData = $.load("rand.php");
$("div#contents").apendTo(myData);
setInterval(loadAndAppend, 5000);
};
不可能ではないと思うのですが。。。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・10秒目をつむったら…
- ・人生のプチ美学を教えてください!!
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
GASに文字列として関数を入れる...
-
addEventListener()でリスナー...
-
2段階プルダウンで1段階目の選...
-
スマホ上で、左右スワイプで次...
-
Outlookのアカウントがあるとメ...
-
jqueryのselect2で検索欄の文字...
-
<tr>指定した表の行要素をボ...
-
食材の期限を管理するためにGAS...
-
前回の質問の続き function mov...
-
このプログラムに、王手をかけ...
-
前回の質問の続き function mou...
-
ビデオのJSについて
-
鍵盤アプリで、スマホの画面に...
-
<div>のタッチ状態を維持したま...
-
jQueryでシンセサイザーを作っ...
-
プログラミング 学習
-
HTMLでサブフレームから親のス...
-
ジャバスクリプトについて。
-
プログラムについて。
-
Q&A掲示板の入力フォームに文字...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
変数にドットをいれることはか...
-
Ajaxのエンコードで
-
.txtファイルの読み込み
-
ajaxでPOSTする変数の変数名を...
-
javascriptでXMLをajaxで読み込...
-
jqueryを使いajaxで取得したデ...
-
jsのreturnで値が返ってこない
-
[jQuery UI] sortableを使いaja...
-
リンク付きの画像をクリックす...
-
iframeのソースを取得
-
jqueryでの外部XMLファイルの読...
-
読み込み開始から読み込み終了...
-
JavaScriptでtabindexの変更っ...
-
階層別の組織図の自動作成について
-
readyStateが4にならない原因
-
Javascriptを使ってQRコード読...
-
jQueryのアコーディオン一番目...
-
カンマ区切りのデータを配列に...
-
インラインフレームを自動更新...
-
JavascriptからPHPへのAjax通信...
おすすめ情報