Help us understand the problem. What is going on with this article?

Webページを一部自動更新にする

More than 3 years have passed since last update.

作成したWebページの一部だけを更新したい。
jQueryのAjaxとそれを定期的に動作させるために jquery.periodicalupdater.js を利用する。

jquery.periodicalupdater.js はこちらから取得

更新部分を実装する

1秒間隔で "ajax.txt" を読み込んで、文字列を書き換える。
…ように実装したつもりだが一回しか更新されない。
"ajax.txt" を更新するたびに文字列が変わるような想定だったが、
何がいけないのかいまいちわからない。。

追記:解決しました。コード内コメント部参照

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.periodicalupdater.js"></script>
    <script type="text/javascript">
      $(function(){
        $.PeriodicalUpdater('./ajax.txt',{
          method: 'get',
          minTimeout: 1000,
          type: 'html'
        },

        function(data){
          <!-- 元々の実装、PeriodicalUpdaterで読み込んでいるためloadは不要、textの更新だけ行う
          $("#ajax_txt").load("./ajax.txt");
          -->
          $("#ajax_txt").text(data);
        });
      });
    </script>
  </head>
  <body>
    <div id="ajax_txt">aaa</div>
  </body>
</html>

オプション設定を見直す

なぜか時間が経つと更新されなくなるので、
オプション設定を再度確認したところ、
multiplier と maxTimeout の組み合わせが原因になっていた。

処理実行毎に minTimeout の設定値に対して multiplier の設定値を掛けて次のインターバルとして使い、
そのインターバルの最大値が maxTimeout の設定値になっていた。

デフォルト設定では下記設定になっているため、
自分で設定しないとインターバルがどんどん長くなっていっていたみたい。

        maxTimeout:64000, // maximum length of time between requests
        multiplier: 2,    // if set to 2, timerInterval will double each time the response hasn't changed (up to maxTimeout)

改めて実装しなおしたのが下記のコード

        $.PeriodicalUpdater('./ajax.txt',{
          method: 'get',
          minTimeout: 1000,
          type: 'html',
          multiplier:1,
          maxCalls: 0
        },

参考にしたWebページ

「jQuery日本語リファレンス」
http://semooh.jp/jquery/

「Think deeply, Do less, More effective」
http://kwski.net/jquery/1022/

momo298
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away