title: Resetting Infinite Scroll for show new results retrieved via AJAX
body: <p>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 <a href="http://infiniteajaxscroll.com/" rel="nofollow noreferrer">Infinite Ajax Scroll</a> plugin shows in the <em>second page</em> 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 <a href="http://infiniteajaxscroll.com/docs/methods.html" rel="nofollow noreferrer">methods</a> to do that but I can't understand how to use them in my code (check the comments).</p>
  
  <pre><code>    // 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();
  </code></pre>
  
  <p>Tried also <a href="https://stackoverflow.com/a/22093845/1252920">this solution</a> but doesn't work.</p>
  
  <p>Similar problem <a href="https://github.com/webcreate/infinite-ajax-scroll/issues/68" rel="nofollow noreferrer">here</a>.</p>