Formのどれかに文字が入っている場合にajaxを止めたい

Question

ページを開くと、DBから取得したレコードを一覧表示します。
フレームワークはcodeigniterを使用しています。
そのときにページ上部に複数の検索項目があります。
普段はajaxで一覧部分だけ5秒ごとに更新し、最新のレコードを取得し表示しています。

<form>
  <label for="text1">No</label><input type="text" name="text1"><br>
  <label for="text2">日付</label><input type="text" name="text2"><br>
  <label for="text3">日付</label><input type="text" name="text3"><br>
  <label for="text4">種類</label><input type="text" name="text4"><br>
  <label for="text5">コード</label><input type="text" name="text5"><br>
  <button>検索</button>
</form>
<div id="list">
<table>
    <tr>
    <th>No</th>
    <th>日付</th>
    <th>名前</th>
    <th>種類</th>
    <th>コード</th>
    </tr>
    <?php foreach($list as $key1 => $val1): ?>
    // ここでCodeigniterで取得したレコードを表示
    <?php endforeach; ?>
</div>

5秒ごとにajaxで最新のレコード用のcodeigniterのメソッドにアクセスし、<div id="list">の中だけ更新しています。

$(function(){
    setInterval(function(){
        $('#list').load('/list/saishin_hyouji');
    },5000);
});

// 表示用html
<div id="list">
<table>
    <tr>
    <th>No</th>
    <th>日付</th>
    <th>名前</th>
    <th>種類</th>
    <th>コード</th>
    </tr>
    <?php foreach($list as $key1 => $val1): ?>
    // ここでCodeigniterで取得したレコードを表示
    <?php endforeach; ?>
</div>

これで、5秒ごとに更新はできているんですが、この更新をinputのどれか一つでも値が入っていたら、ajaxを止めたいです。

 var timer;
    var start = function() {
        timer = setInterval(function(){
            var path = location.pathname.slice(25);
            $('#list').load('/admin/visitors/situation_view' + path);
        },5000);
    }

    $('input').bind('keydown keyup keypress change',function(){
        if($(':input').val() == "") {
            console.log("start");
            start();
        } else {
            console.log("stop");
            stop();
        }
    });

    if($('input').val() == "") {
        console.log("start");
        start();
    }

このようなことを試したりしましたが、5秒ごとの更新が複数回、行われてしまいうまくとまりません。
他には

    var timer;
    var start = function() {
        timer = setInterval(function(){
            var path = location.pathname.slice(25);
            $('#list').load('/admin/visitors/situation_view' + path);
        },5000);
    }

    $('input').bind('keydown keyup keypress change',function(){
        console.log("stop");
        stop();
    });

    if($('input').val() == "") {
        console.log("start");
        start();
    }

このようなこともしましたが、これではinputが空になったときにページを更新しないとajaxで更新が始まりませんでした。

詳しい方いらっしゃいましたら、よろしくお願いします。

Answer 1

コードが長いですが、以下でできると思います。

setInterval(function(){
  var flag = false;

  $('form input').each(function() {
    if($(this).val() !== '') {
      flag = true;
  
      return false;
    }
  });

  if (!flag) {
    $('#list').load('/list/saishin_hyouji');
  }
},5000);

Comments

[退会済みユーザー]

ご回答ありがとうございます！
この方法で更新を止めたり再開したりすることができました。

同じ方法でselectが２つあるパターンも試してみましたが、こちらは上手くいきませんでした。
```
setInterval(function(){
var flag = false;

$('form select').each(function() {
if($(this).val() !== 0) {
flag = true;

return false;
}
});

if (!flag) {
$('#list').load('/list/saishin_hyouji');
}
},5000);
```
どちらのselectの初期値も０です。
コンソールを確認しても、$(this).val()はしっかり０となっているんですけどね。
変更したときに止まってくれません。。。
selectでは同じ方法はそもそも無理なんですかね。

[退会済みユーザー]

上記のselectの件ですがページ内の他のselectがあったのですが、それが原因でした。。。
失礼いたしました。

これで全て解決しました。
ありがとうございました。

Answer 2

5秒周期を生かしたまま、読み込みだけとめたいのであれば、
setInterval(function(){
の、loadメソッド直前で、特定項目の入力があれば、
loadしないようにifで分岐すればどうでしょうか。

Comments

[退会済みユーザー]

ありがとうございます。
eachと分岐で止めたり、再開したりすることができるようになりました。