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で質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- ノートパソコン Windowsが起動しなくなってしまいました。 4 2023/08/28 16:30
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- PHP htmlspecialcharsが機能していないです。 バグですか? 1 2022/04/05 01:22
- PHP php テーブルが作成できない 1 2022/11/17 23:41
- MySQL php テーブルを作れない 2 2022/11/17 18:22
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
変数にドットをいれることはか...
-
.txtファイルの読み込み
-
リンク付きの画像をクリックす...
-
JavaScriptでリンク先コンテン...
-
JavascriptからPHPへのAjax通信...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
C言語の 配列の中 出力について
-
<input>のvalue値をプルダウン...
-
二つのbxsliderをレスポンシブ...
-
Selenium4でボタンをクリックで...
-
Googleマップに複数のピンを立...
-
フレーム内の要素へのXPATHはど...
-
Javascriptを使ってQRコード読...
-
プルダウン内容に応じてラジオ...
-
カンマ区切りのデータを配列に...
-
AjaxでSJISファイル読み込みす...
-
Ajaxでフォームデータを連続登...
-
IndexedDB を使ってファイルア...
-
bxsliderで画像毎に表示時間を...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
[jQuery UI] sortableを使いaja...
-
ajaxでPOSTする変数の変数名を...
-
.txtファイルの読み込み
-
変数にドットをいれることはか...
-
JavaScriptでリンク先コンテン...
-
リンク付きの画像をクリックす...
-
jqueryを使いajaxで取得したデ...
-
jQueryでloadしたphpをapendTo...
-
配列に格納したXHRのreadyState...
-
読み込み開始から読み込み終了...
-
jsのreturnで値が返ってこない
-
Ajaxのエンコードで
-
javascriptでXMLをajaxで読み込...
-
Selenium4でボタンをクリックで...
-
Javascriptを使ってQRコード読...
-
JavascriptからPHPへのAjax通信...
-
IndexedDB を使ってファイルア...
-
同一ページ移動時ハンバーガー...
-
JavaScriptでtabindexの変更っ...
-
jQueryを使いformでsubmitした...
おすすめ情報