- ベストアンサー
jqueryを使って非同期通信で10秒ごとにリロード
jqueryを使って非同期通信で10秒ごとにリロードをさせようと しているのですが、 setInterval(function(){ $(document.body).load("./hoge.php"); },10000); とすると最初にリロードした10秒と次にリロードされた10秒が 一緒にカウントされているみたいで、リロードの間隔が めちゃくちゃになってしまいます。 どなたかご教授ください。 よろしくお願いいたします。
- hunter_999
- お礼率19% (31/161)
- AJAX
- 回答数1
- ありがとう数8
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
詳しいことは調べていないので分かりませんが、ロードに時間がかかっているために、間隔がめちゃくちゃに見えるだけではないでしょうか？ あと、setIntervalには色々と面倒があるようなので、それもチェックしてみてください。 http://www.mapee.jp/wlh/javascriptsetinterval.html
関連するQ&A
- 親フレームのjQueryオブジェクトを使えるか？
html（親html）上に別のhtml（子html）を<iframe>で表示しています。 親htmlではjQuery（v1.8.2）を使用しています。 子htmlでもjQueryを使いたいです。 単純に子htmlでjquery.jsを読み込めば良いですが、勉強のため以下のように親htmlのjQueryオブジェクトを使って実現してみました。 【子htmlのscript】 var $ = parent.jQuery; $(window).load(function() { $("body", document).append( "hoge" ); }); これで見た目は正しく動作してますが、以下の不明点が出てきたので質問させて下さい。 【質問】 $(window).loadではなく$(document).readyを使った場合は"hoge"が追加されていませんでした。 <body>要素がまだ読み込めていないせいかとも思いましたが、documentの読み込み完了後に実行されているはずです。 なぜ"hoge"が追加されないのでしょう？ このdocumentは親htmlのdocumentなのでしょうか？ ただ、$("body").append( "hoge" )と書いた場合は親htmlに"hoge"が追加され、$("body", document).append( "hoge" )と書くことで子htmlに"hoge"が追加されるようなので、親htmlのdocumentではない気がします。 よろしくお願いします。
- 締切済み
- JavaScript
- jQueryのloadでアラートやサウンドを鳴らす
フォームからの発言をMysqlに登録し、それを定期的にリロードして表示するテストをしています。 チャットのような感じと言えば分かりやすいでしょうか。 setInterval(function(){ $("#container").load("./check.php"); },30000); //30秒ごとにチェック 上記のようにjQueryを使ってcheck.phpを監視しています。 check.phpにはMysqlを時間でソートし、最新の10件を表示するようにしてあります。 この時、新規の発言があった場合にアラートを表示する、サウンド(chime.wav)を鳴らす、 のどちらかを行いたいのですが、なにをきっかけにすれば良いのかが分かりません。 どなたかお詳しい方、ご教示願います。
- ベストアンサー
- JavaScript
- jqueryについて質問です。
jqueryについて質問です。 ----------------------------------------------------------- test.js $(window).load(function() { $("body").load("a.php"); $("#btn").click(function() { alert();///動作しない } }); ----------------------------------------------------------- a.html <input type="button" id="btn" name="btn" value="send"> ----------------------------------------------------------- load先のidのクリックを監視するにはどうしたらいいのでしょうか？
- ベストアンサー
- JavaScript
- jquery自体をJavaScriptで読み込む
以下のようなものを想定して、jquery.js という中身がjqueryでないものから jqueryの実態を読み込みをさせようとしているのですが、うまくいきません。 ・jquery 2以降は、IE8以前をサポートしなくなるので、useragentで 読み込むjqueryを選択したい。 ・現在、CGIスクリプト上で、jqueryの読み込みを判断しているが、できれば 外部JavaScriptで巨大なjqueryの読み込みの判断をさせたい。 ・キャッシュされたとしても、ライブラリであることから、圧縮して７０ｋバイトと あまりにも巨大である ・(googleapiを利用すると、IE8以前では、プライバシーの警告が出る場合がある） 確かに、スマホにjqueryを普通に読み込ませても、何も問題なく動作しますが、 相当がんばって圧縮をしても70kバイト程度のライブラリを、使用しないのに 読み込むというのも気が引ける部分もあります。 何とか、動的に、かつ、何も問題なく、jqueryをJavaScriptで読み込む方法は あるでしょうか？ このようなコードは、document.bodyがnullであるため、はじかれてしまいます。 var script = document.createElement('script'); script.src = 'http://hoge/jquery-1.js'; document.body.appendChild(script); var callee = arguments.callee; var interval = setInterval(function() { if (!document.evaluate) return; clearInterval(interval); interval = null; callee(); }, 100); このコードでも、jqueryを使用するものが、jQueryがないというエラーで、うまくいきません var scrptE = document.createElement("script"); scrptE.setAttribute("type", "text/javascript"); scrptE.setAttribute("language", "JavaScript"); scrptE.setAttribute("src", "http://hoge/jquery-1.js"); document.getElementsByTagName("head")[0].appendChild(scrptE); 以下のようなのは、googleapiのため、使わないものと考えます。 http://phpjavascriptroom.com/?t=ajax&p=jquery よろしくお願いします。
- ベストアンサー
- JavaScript
- リロード
すいません。私JavaScriptはまったくの素人です。 あるページを５分ごとにリロードさせたくて、 <script language="JavaScript"> <!-- function reload_me() { document.location.reload(); setTimeout("reload_me()",300000); } //--> </script> <BODY onLoad="reload_me()"> と書いたところ、ロードしてくると同時に次のロードが始まってしまい、 300000という時間が全くきいてないような感じです。 （間髪を入れず無限にリロードが続いている状態） <body>のonLoadに書いてはいけないのでしょうか？ それとも書き方がよくないのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryでAJAX非同期通信をしてphpからメールを送信する。送信
jqueryでAJAX非同期通信をしてphpからメールを送信する。送信完了後にlightbox風に「送信しました」と表示させたい。 sendmail.phpにpostでフォームの内容が渡りません。どうやってsendmail.phpに値を渡して sendmail.phpの$msgを戻して、表示させるのでしょうか？ 素人です。1週間ほど調べましたが、これが限界でした。 宜しくお願いします。 index.php <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript"> //<![CDATA[ $(function(){ $("#exeBtn").click(function() { $.ajax({ url : "sendmail.php", type : "post", data : ({ message: $('#message').val(),{off:$('#exeBtn').val()}), datatype:'json', success: function( dispMsg(){ if('<?=$msg?>' != ''){ alert('<?=$msg?>'); } }}, }); }); }); //]]> </script> </head> <body> <form> <input id="message" type="hidden" name="message" value="EntryTitle"/> <input id="exeBtn" type="button" name="off" value="リンク切れ" /> </form> </body> </html> sendmail.php <?php header(’Content-Type: text/xml; charset=UTF-8′); $off=$_POST["off"]; $body = stripslashes($_POST['message']); if ($off != ""){ $to = "hogehoge@hogehoge.co.jp"; $subject = "報告"; $subject=mb_convert_encoding($subject,"JIS","utf-8"); $body=mb_convert_encoding($body,"JIS","utf-8"); $ret = mb_send_mail($to,$subject,$body); if($ret){ $msg = '送信しました'; }else{ $msg = '送信失敗しました'; } } } ?>
- ベストアンサー
- AJAX
- ajax反映後のjqueryが動かない
色々と簡略化してますが、以下のようなajaxを交えたコードを書いています。 <script type="text/javascript"> $(function() { /* 初期変数処理 */ ............ /* HTML内object操作 */ ............ /* ある箇所をclickでイベント */ $('#hoge').click(function(e) ←(1)画面アニメーション { test3(); } /* 数秒後に(1)を自動実行 setInterval(function(){ ...... } /* formを使って検索 */ $('#form').submit(function(event) { event.preventDefault(); ........(中略) $.ajax({ type:"POST", url: "hoge.php", data:{data: data}, timeout: xxxxx, beforesend: { ........ }, complete: { ........ } success: function(data){ ......... ← (2)HTML内object操作、jquery部分は避ける test2(); } }); return false; }); function test1(){ ........ }; function test2(){ ........ }; function test3(){ ........ }; }); </script> [HTML] <form id = "form"> <input name="list"/> <button>送信！</button> </form> <div id="hogehoge"> ................. ←(3)検索で内容変更する箇所 </div> としているのですが、一度送信ボタンを押して(2)の処理を行った後、 (1)のアニメーションも含め、すべてのjquery要素が使用できなくなってしまいました。 http://semooh.jp/jquery/api/events/live/type,+fn/ によればliveを使えばclick処理はできるとありましたが、これでも動きません。 setIntervalの効果や、submitイベントすら動きませんでした。 なお、検索前は問題なく動作します。通常時は問題ないのですが、submit後からおかしいので、 ajaxに関してなにか見逃している箇所があるとは思うのですが、 どこが悪いのかはっきりと検討がついていません。 どなたかお知恵をお貸しいただけませんでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript
- cookie.jquery.jsでのcookie
cookie.jquery.jsでのcookie取得について 現在、cookie.jquery.jsでcookieを以下のように取得しています。 $(window).load(function(){ $.cookie("access",$('body').addClass('access'));}) たとえば、サイトを表示して10秒後にcookie取得したいと思い、setTimeoutを使用すれば良いと思ったのですが、うまく動作しませんでした。 このような使い方はできないのでしょうか？
- ベストアンサー
- JavaScript
- jQueryでloadしたphpをapendToしたいのですが。
jQueryのload関数を使って、日付を元にランダムな10ケタの数字を生成するプログラム（rand.php）を読み込み、そのプログラムの結果をcontentsというIDのdiv内にappendToしたいのです。 そして、５秒ごとにrand.phpを読み込み、そのたびにcontentsというIDのdiv内に結果をappendToしたいのです。 イメージとしては下記のような感じになります。 $(function(){ function loadAndAppend(){ $("div#contents").apendTo(load("rand.php")); setTimeout(loadAndAppend, 5000); }; loadAndAppend(); }); しかし、これだとうまくいきません。apendTo(load("rand.php"))という部分がおかしいのでしょうが、これをどう直せばよいか分かりません。 ぜひとも解決法を教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- 【jQuery】setInterval
jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>
- ベストアンサー
- JavaScript
