重置無限滾動以顯示通過AJAX檢索到的新結果

Question

我有一個過濾器表單，它使用來自數據庫的新過濾結果填充容器div（#results）。但更改過濾器後Infinite Ajax Scroll插件顯示第二頁第一次搜索的結果。在更改事件中，我需要完全重置舊結果並僅顯示新結果。我嘗試了很多解決方案，但都沒有做完我知道methods這樣做，但我不明白如何在我的代碼中使用它們（查看註釋）。

// 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(); 

也試過this solution但不起作用。

類似的問題here。

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" 
    });