定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
PeriodicalUpdaterは、定期的にpostもしくはgetリクエストを送信してくれるjQueryプラグインです。Twitterのタイムラインのように定期的にツイートをロードしてくれるようなやつです。自作しようと思ったのですが、あまりにもシンプルだったため、これを使用することにしました。ダウンロード
スクリプト
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.periodicalupdater.js" type="text/javascript"></script>
実装
<div id="div1022"></div> <script type="text/javascript"> $(document).ready(function(){ $.PeriodicalUpdater({ // オプション設定 url: 'currenttime', // 送信リクエストURL minTimeout: 6000, // 送信インターバル(ミリ秒) // method // 'post'/'get':リクエストメソッド // sendData // 送信データ // maxTimeout // 最長のリクエスト間隔(ミリ秒) // multiplier // リクエスト間隔の変更(2に設定の場合、レスポンス内容に変更がないときは、リクエスト間隔が2倍になっていく) // type // xml、json、scriptもしくはhtml (jquery.getやjquery.postのdataType) }, function(data){ var myHtml = 'The data returned at ' + data + ''; $('#div1022').prepend(myHtml); }); }) </script>
あとは、オプションを設定し、更新データを表示させるだけです。
PHP
function currenttime(){ echo date('Y-m-d H:i:s', time()); }
デモ
サンプルとして、時刻を要素の先頭に追加していく(prepend)ものをつくりました。
関連記事
-
マウスオーバーすると画像にキャプションを表示してくれる「Mosaic」
「Mosaic」は、画像などにマウスオーバーすると、キャプションをスライド(イン/アウト)もしくはフェイド(イン/アウト)させてくれるjQueryプラグインです。ダウンロードはこちら スクリプト
-
親要素の大きさに合わせて画像をリサイズ「imgLiquid」
「imgLiquid」は親要素の大きさに合わせて画像を縮小・切り取りを行ってくれるjQueryプラグインです。 ダウンロードはこちら スクリプト 実装
-
カウントダウン プラグイン
FlipClock #時間 FlipClock サイト [browser-shot url="http://xdsoft.net/jqplugins/flipcountd
-
マウスオーバーでキャプション表示してくれる プラグイン
画像マウスオーバーするとキャプションを出現させるプラグイン (jQuery 1.10.2で動作確認のできたものに限定しています。デモ一覧) imgタグの#alt属性から自動でキャプションを生成
-
開閉できるツリー構造を表現できる「jsTree」
「jsTree」は、Webサイト上にツリー構造を表示してくれるJQueryラグインです。実際、使うかというのは謎ですが、ブログ内に設置する機会があり使用してみましたので参考まで。 ダウンロードはこち
-
レスポンシブに対応した画像ギャラリーが実装できる「Responsive Image Gallery」
「Responsive Image Gallery with Thumbnail Carousel」はレスポンシブにも対応した画像ギャラリーが実装できるjQueryプラグインです。Twitterの「最
-
要素を折りたたみできる「nestedAccordion」
「nestedAccordion」は、クリックすると要素を開閉(折りたたみ)できるjQueryプラグインです。名前の通りネストして、アコーディオンの中にアコーディオンも実装できます。ダウンロードはこち
-
テキストエリアを自動的にリサイズしてくれる「Autosize」
「Autosize」は、テキストエリアのサイズを入力文字数によって自動的に変更してくれるjQueryプラグインです。標準では、枠を超える文字数を入力するとスクロールバーが表示されますが、かわりに建増し
-
ナビゲーションメニューを画面サイズによってドロップダウンにしてくれる「TinyNav.js」
「TinyNav.js」はナビゲーションメニューを画面サイズがある以下になるとドロップダウンにしてくれるjQueryプラグインです。 スクリプト 実装 スタイルシート
-
ファイルアップロードフォーム プラグイン
Ajax File Upload Form with jQuery Ajax File Upload Form with jQuery [browser-shot url="h
Comment
wordpress初心者です。結婚式があるので招待用のサイトを作っています。
プラグイン関係を使ってある程度やりたいことは調べまくってできたんですがどーしてもperiodicalupdaterのやり方がわかりません。
どこにある何に何を記述すれば動くのでしょうか?すみません。もしよろしければ教えて頂けないでしょうか?
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」
https://t.co/fukQyZK27m
フォームの自動保存とかに使えるかも。 / “jQuery: 定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」 | Think deeply, Do less, …” http://t.co/3piOzMQJN9 #ajax #javascript
フォームの自動保存とかに使えるかも。
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」 http://t.co/cImBjzHuas
定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」 http://kwski.net/jquery/1022/
[...] http://kwski.net/jquery/1022/ [...]
jQuery: 定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」 kwski.net/jquery/1022/ @kwski3さんから
jQuery: 定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」 http://kwski.net/jquery/1022/ @kwski3さんから
jQuery: 定期的にAjaxリクエストを送信してくれる「PeriodicalUpdater」 | Think deeply, Do less, More effective http://bit.ly/You3D3