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"))という部分がおかしいのでしょうが、これをどう直せばよいか分かりません。

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

このQ&Aに関連する最新のQ&A

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に関連する人気のQ&A

jQuery 使い方」に関するQ&A: javascriptの併用

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptのwindow.openでリファラーが取得できない。

<SCRIPT language="JavaScript">
<!--
function OpenWin(){
window.open("sample.cgi,"new","width=500,height=250");

}
// -->
<A href="#" onClick="OpenWin()">オープン</a>

上のようにsample.htmlのページ内にwindow.openのJavaScriptを書いています。
sample.cgi内に$ENV{'HTTP_REFERER'}を埋め込んでいるのですがリファラーが取得できません。
window.openの場合はリファラーは取得できないのでしょうか?

Aベストアンサー

リファラーは取得できませんので、わたしならJavaScriptでリファラーを取得してそれをCGIに渡します。。

<SCRIPT language="JavaScript">
<!--
function OpenWin(){
window.open("sample.cgi?ref=" + document.referrer, "new", "width=500,height=250");
}
// -->

後はsample.cgiの中で

use CGI qw(:standard);
$ref = param('ref');

とすれば$refにリファラーの値が入ります。

Qvar $i = hoge; $の意味について

初心者の質問ですみませんが教えて下さい。
jqueryのソースで以下のソースがあったのですが、
var i = ではなくvar $i にしないといけない理由ってありますか?

var $i = $( '#img' ); // 対象の img タグを選択
var img = new Image();
img.src = $i.attr('src');

Aベストアンサー

こんにちは。

$iにしなくてはいけない理由はないと思います。

多分$('#img')でjQueryのオブジェクトを取得してるので$をつけているんだと思います。
(私もjQueryで取得した要素については$を付けるようにしています)
ようするにわかりやすいようにです。

Q既知?IE7でJavaScriptのwindow.openメソッドでエラー

Internet Exploer7にアップデートされた端末において、以下のソースを実行し、「リンク」をクリックした場合、JavaScriptエラーが発生します。

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function OpenWin() {
var win1=window.open("","コード");
win1.location.href="./test.html";
}


//-->
</SCRIPT>
<A HREF="JavaScript:OpenWin()">リンク</A>

色々と試した結果、window.openメソッドの第2引数(上記では"コード"となっている箇所)において、長音(ー)や感嘆符(!)など、記号のような文字を使用した場合、JavaScriptエラーの「引数が無効です」というエラーが表示されます。半角でも同様で、アンダーバー(_)以外の記号文字は大概エラーとなります。第2引数を"コド"のように、記号文字が入らないように記述しなおすと、エラーが発生しません。

この現象はIE6では発生しませんでした。

質問したいのは、この現象は既知のエラーとして伝えられているのでしょうか?ウェブ上で様々な検索をしても同様の現象は報告されていないので、端末固有の現象なのでしょうか?

使用OS:Windows XP SP2
IEバージョン:7.0.5730.11

宜しくお願い致します。

Internet Exploer7にアップデートされた端末において、以下のソースを実行し、「リンク」をクリックした場合、JavaScriptエラーが発生します。

<SCRIPT LANGUAGE="JAVASCRIPT">
<!--
function OpenWin() {
var win1=window.open("","コード");
win1.location.href="./test.html";
}


//-->
</SCRIPT>
<A HREF="JavaScript:OpenWin()">リンク</A>

色々と試した結果、window.openメソッドの第2引数(上記では"コード"となっている箇所)において、長音(ー)や感嘆符(!)...続きを読む

Aベストアンサー

検証してませんが、そのような属性(window名)にはSGMLやらで
の決まりがあるんで、2バイトは避けたほうがいいです。
推測ですがMS側でそれに気づいて7で修正したのでは?

Q$("body").height();と$("body").css("

$("body").height();と$("body").css("height");の違い?

jqueryにてbodyの高さを取得し、その数値に適当な値を足すなり引くなりして、他の要素の高さとして指定するということがやりたかったので

$(function() {
var bodyheight = $("body").css("height");
var mainheight = bodyheight-230;
$("#main").css("height",mainheight);
});

とした所、bodyの高さは取得できたのですが、その後が駄目だったので

$(function() {
var bodyheight = $("body").height();
var mainheight = bodyheight-230;
$("#main").height(mainheight);
});

と変更したところ、期待通りに動きました。

この2つの違いを、どなたかお分かりになる方にご教授いただきたいです。

Aベストアンサー

#1です。ちょっと考えが足らなかった。
css('height')だと読み出しも単位付だから設定の前に演算でNGでしたね。

というか、こういう演算目的のために常にピクセル単位で読み出したり設定できるjQuery.heightやjQuery.widthが用意されているのでしょうね。

QJavaScript window.openで開く際、そのwindowの背景色を指定したい

親ウィンドウにある画像のサムネイルをクリックすると、子windowにその画像の大きいものが表示されるHTMLを作っています。

その際に、子windowの背景色を黒くしたいのですが、うまくいきません。以下にソースを記載します。

【HTML】
<a href="javascript:void(0);" onClick="winopen('1.jpg')"><img src="1s.jpg" /></a>

【JavaScript】
function winopen(filename)
{var w=window.open(filename,'','width=900,Height=700');
w.focus();
w.document.write("<body bgcolor=black>");
}

このようになっているのですが、これだとw.document.write("<body bgcolor=black>")のところで、窓全体が黒くなってしまい、jpgがなくなってしまいます。
jpgの背景を黒くしたいのですが、どのようにしたらよいでしょうか?

親ウィンドウにある画像のサムネイルをクリックすると、子windowにその画像の大きいものが表示されるHTMLを作っています。

その際に、子windowの背景色を黒くしたいのですが、うまくいきません。以下にソースを記載します。

【HTML】
<a href="javascript:void(0);" onClick="winopen('1.jpg')"><img src="1s.jpg" /></a>

【JavaScript】
function winopen(filename)
{var w=window.open(filename,'','width=900,Height=700');
w.focus();
w.document.write("<body bgcolor=black>");
}

このよ...続きを読む

Aベストアンサー

>w.document.write("<body bgcolor=black>");
これだと、ブラウザの画面が新しいBODYオブジェクト(背景=黒)に
なってしまい、今までの画像もテキストも消えます。

w.document.body.style.background = "BLACK";
このように、既存のBODYオブジェクトのプロパティを変更する方法に
変更してみてください。

Q(function(){})()の意味

(function(){})() の意味がよくわからずに困っています。

下記の2タイプではどう意味が変わってくるのでしょうか?
(1)var fuga = function(){};
(2)var fuga = (function(){})();

下記のコードで実験してみたところ、
---------------------
var fuga = function(){
this.obj = 'value';
};

var fuga = (function(){
return {
obj = 'value';
};
})();
---------------------
(1)の場合は、newしないとfugaオブジェクトのメンバを使用できない、
(2)の場合は、newしなくてもfugaオブジェクトのメンバを使用できるようなのですが、
(2)で(function(){})を取り除いて出てくる()はnewのエイリアスだったりするのでしょうか?

Aベストアンサー

var fuga = (function(){})();

var fuga = function(){}();
と同じです
つまり関数を定義してすぐ呼んでいるだけです

Qwindow.openで開いた子ウィンドウから親ウィンドウのjavascriptを実行するには

window.openで開いた子ウィンドウから親ウィンドウのjavascriptを実行するにはどうしたらよいのでしょうか。

子ウィンドウから
<INPUT TYPE="button" value=\"実行\" onClick=opener.document.jikkou();>

<INPUT TYPE="button" value=\"実行\" onClick=opener.jikkou();>
等のボタンを作ってみましたが、無反応でした。

すいません。宜しくお願いします。

Aベストアンサー

普通に実行できると思いますが・・・

//parent.htm
<script>
function jikkou(){
alert("ok");
}
</script>
<input type="button" value="open child" onclick="window.open('child.htm')">

//child.htm
<input type="button" value="jikkou" onclick="opener.jikkou()">

Q$(document).readyとloadの違い

■質問1
jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?
下記理解で合ってるでしょうか?

●$(document).ready(function()
・複数回実行できる
・ページを全て読み込んだ後に実行
・ページの下部に記述しなくとも良い

●$(window).load(function()
・複数回実行できない(最後の1回が実行される)
・ページ読込開始時点で実行(正確には記述位置に来た時点?)


■質問2
「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか?
・どちらも同じ?
「$(window).load(function()」V.S「window.onload = function(){」

Aベストアンサー

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する(=htmlの終了タグが読み込まれる)時に呼び出されるからページを全て読み込んだ後に実行しているように見えるのである。
> ・ページの下部に記述しなくとも良い

> ●$(window).load(function()
> ・複数回実行できない(最後の1回が実行される)
こちらも冒頭の解説の通り、window.onload = function()を何回も行うので最後の1個が有効になるのだね。
> ・ページ読込開始時点で実行(正確には記述位置に来た時点?)
いや、そんな事はない。window.onloadと同じタイミングというか登録した関数がwindows.onloadで呼び出される。なので、$("body").readyの後だ。ちなみに$("body").readyは$(document).readyよりも前に呼び出される(理由は「readyはDOMの準備が完了したら呼び出される」という意味を考えて欲しい)。

> ■質問2
> 「jQuery記述」と「JavaScriptだけで記述」とでは、内容やタイミングに違いはありますか?
> ・どちらも同じ?
> 「$(window).load(function()」V.S「window.onload = function(){」
違う。前者はjQueryオブジェクトにラップされるが後者はされない。

> ■質問1
> jQueryの「$(document).ready(function()」と「$(window).load(function()」は何が違うのでしょうか?
readyは「DOM要素の準備が完了した時」に呼び出される「jQueryイベント」であり、loadは生JavaScriptのonloadに相当する「Webブラウザ組み込みJavaScriptイベント」だ。

> ●$(document).ready(function()
> ・複数回実行できる
これもjQuery独自のイベントなのでできる事だね
> ・ページを全て読み込んだ後に実行
$(document).ready(function()の場合、documentのDOM要素が完了する(=htmlの終了...続きを読む

Qjavascript window.open

javascript window.open を使ってウインドを開こうとしています。

トップウインドとしてデスクトップに表示したいのですが、二重三重には
表示したくないため、同じウインド名で既に開こうとしています。

この場合、最小化や隠れて開いているウインドは隠れたままです。

同名ウインドが開いていても、そのウインドをトップウインドとしてデスクトップに
表示させる方法を教えてください。

よろしくお願いします。

Aベストアンサー

var w = window.open(url, name);
w.focus();

とかではいかがでしょうか?

Qイベントリスナに登録される function(e){} の "e" はeventオブジェクト?

私はイベントリスナ登録時の匿名関数に渡す引数eの意味が今まで理解できていませんでした。
最近、下記コードを実行することで、

<script type='text/javascript'>
window.addEventListener ('click', function(e){
console.info(e);// 引数をコンソール表示 (要Firebug)
for (p in e){
console.info(p + ' = ' + e[p]);// プロパティを列挙
}
}, false);
</script>

「eventオブジェクトを渡しているらしい」と朧気ながら理解できました。
ただ、疑問点も残ります。
私の理解では、匿名関数は

(function(str){
alert(str);
})('Hello');

のように明示的に引数を渡さなければ、引き渡された値は undefined となるはずでした。

変数eの値はどこから出現したのでしょうか?
そもそも、変数eはeventオブジェクトなのでしょうか?

私はイベントリスナ登録時の匿名関数に渡す引数eの意味が今まで理解できていませんでした。
最近、下記コードを実行することで、

<script type='text/javascript'>
window.addEventListener ('click', function(e){
console.info(e);// 引数をコンソール表示 (要Firebug)
for (p in e){
console.info(p + ' = ' + e[p]);// プロパティを列挙
}
}, false);
</script>

「eventオブジェクトを渡しているらしい」と朧気ながら理解できました。
ただ、疑問点も残ります。
私の理解では、匿名関数は

...続きを読む

Aベストアンサー

イベントハンドラにはイベントオブジェクトが自動的に渡されます。
https://developer.mozilla.org/ja/DOM/event

IEではwindowオブジェクトにeventが括り付けられていて参照可能となっているので、(たしか)このような動作はしませんね。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング