特定のページに表示される結果のリストがあり、これらは単純な AJAX リクエストを使用して定期的に更新されます。入力フォームを使用すると、これらの結果をフィルタリングできますが、データは数秒ごとに更新されるため、入力フォームはすべてのデータを更新するため、正しく機能しません。フォーム入力フィールドに値があるときに AJAX が更新されないようにする方法はありますか?
以下は HTML コードです。
<div id="my-query-results" class="visible">
<div>
<form class="searchboxInput" action="#">
<input id="kwd-my-query-results" type="text" value="">
</form>
</div>
<div id="my_recent_queries">
<span class="loading_placeholder">Loading ...</span><br />
<img src="../img/ajax-loader.gif" />
</div>
</div> <!-- my query results -->
以下は、私が使用していたAJAXリクエストです。
if( $("#kwd-my-query-results").val() != "") {
function updateMyQueries() {
$.ajax({
url: "/myrecentqueries",
cache: false,
success: function(html){
$("#my_recent_queries").html(html);
}
});
setTimeout("updateMyQueries()", 600000);
}
updateMyQueries();
} else {
function updateMyQueries() {
$.ajax({
url: "/myrecentqueries",
cache: false,
success: function(html){
$("#my_recent_queries").html(html);
}
});
setTimeout("updateMyQueries()", 4000);
}
updateMyQueries();
}
上記の if else ステートメントは機能していないようです。入力ボックスに値が存在すると、else ステートメントに評価されます。length() も試したと思いますが、それもうまくいかなかったようです。これにアプローチする他の方法はありますか?
アップデート
以下の提案を踏まえて次のことを試しましたが、ある程度は機能します。最初に結果をロードし、データをリロードせずに検索できるようにしますが、入力フィールドにテキストがない場合でも、定期的に結果をリロードしません...
$(function(){
setTimeout(updateMyQueries(), 4000);
});
function updateMyQueries(){
if ($("#kwd-my-query-results").val() == "") {
// do ajax call
$.ajax({
url: "/myrecentqueries",
cache: false,
success: function(html){
$("#my_recent_queries").html(html);
}
});
}
}