Question

我有一个显示在特定页面上的结果列表，这些结果会使用简单的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);
      }
    });
  }
}

Answer 1

我首先将updateMyQueries函数移出if语句然后可能是这样的。

$(function(){
     SetInterval(updateMyQueries(), 4000):
})

function updateMyQueries(){
    if($("#kwd-my-query-results").Val() == ""){
          // do ajax call
    }
}

编辑 - 这将有效

setInterval(function (){    
    if($("#search").val() == ""){
           // Ajax call here
        }
    }, 4000);

仅当表单输入没有值时才更新div（使用AJAX）

1 个答案: