php - 重置无限滚动以显示通过 AJAX 检索到的新结果

Question

我有一个过滤器表单，它在更改时使用来自数据库的新过滤结果填充容器 div (#results)。但是在更改过滤器后，Infinite Ajax Scroll插件会在第二页显示第一次搜索的结果。在更改事件中，我需要完全重置旧结果并仅显示新结果。我尝试了很多解决方案，但什么也没做。我知道有方法可以做到这一点，但我不明白如何在我的代码中使用它们（查看评论）。

    // Form select inputs: on change call the filter
    $("select").on("change", function() {
       setTimeout(function() { 
         ias.destroy(); 
       }, 1000);
       ias.bind();
       filter();
    });

    // Filter: Ajax call that returns new results by a SQL query to the DB
    var filter = function() {
      var formData = form.serializeObject();
      $.ajax({
        url: "/libs/filterData.php",
        type: "POST",
        data: JSON.stringify(formData),
        cache: false,
        success: function(results) {
          $("#results").html(results);
        }
      });
    };

    // IAS configuration
    //var initializeIas = function() {
      var ias = jQuery.ias({
        container: "#results",
        item: ".result",
        pagination: ".page-nav",
        next: ".page-nav a"
      });
    //};

//initializeIas();

也试过这个解决方案，但不起作用。

类似的问题在这里。

Answer 1

尝试在成功处理程序中重新初始化 IAS：

// Filter: Ajax call that returns new results by a SQL query to the DB
var filter = function() {
  var formData = form.serializeObject();
  $.ajax({
    url: "/libs/filterData.php",
    type: "POST",
    data: JSON.stringify(formData),
    cache: false,
    success: function(results) {
      ias.destroy(); 
      $("#results").html(results);
      ias.bind();
    }
  });
};

// IAS configuration
var ias = jQuery.ias({
      container: "#results",
      item: ".result",
      pagination: ".page-nav",
      next: ".page-nav a"
  });