Resetting Infinite Scroll for show new results retrieved via AJAX

北战南征 提交于 2019-12-14 02:35:52

问题


I've a filter form that on change fills a container div (#results) with new filtered results from a DB. But after changing the filter the Infinite Ajax Scroll plugin shows in the second page the results of the first search. On change event I need to totally reset the old results and show only the new ones. I tried many solutions but nothing done. I know there methods to do that but I can't understand how to use them in my code (check the comments).

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

Tried also this solution but doesn't work.

Similar problem here.


回答1:


Try re-initializing IAS within the succes-handler:

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


来源:https://stackoverflow.com/questions/24419462/resetting-infinite-scroll-for-show-new-results-retrieved-via-ajax

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!