Resetting Infinite Scroll for show new results retrieved via AJAX

Question

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.

Possible duplicate of http://stackoverflow.com/q/20404493/932282 — mhu, Jun 25 '14 at 22:20
I tried this solutions http://stackoverflow.com/a/22093845 because the other ones are old, now there's version 2 of the plugin. It doesn't work... (check the updated code above) — Fred K, Jun 26 '14 at 08:00

mhu · Answer 1 · 2014-06-26T11:10:53.463

0

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

edited Jun 26 '14 at 11:10

answered Jun 26 '14 at 09:57

mhu

17,720
10
62
93

Hi @mhu: I tried your code, and also to remove seTimeout but it doesn't work, that is, the plugin loads in the second page the old results. – Fred K Jun 26 '14 at 10:32
Just tried, the same as above :\ I can't get where is the problem! – Fred K Jun 26 '14 at 11:19
Please make a fiddle for further assistance – mhu Jun 26 '14 at 11:45
Thanks for the support @mhu. I've uploaded the sample project here http://bit.ly/1pmdci2. Try to change form select "Price" to (i.e.) 7000 and you will see that the second page shows the old and wrong results. Let me know if you need something. – Fred K Jun 26 '14 at 12:04
As you configured it IAS uses the href of the ".nav a" element to load the next page. You always return `?pagina=2`, so IAS always loads page 2. – mhu Jun 26 '14 at 13:26
Did you managed to solve this issue, I'm facing same issue. Pls advise. – Krunal Aug 08 '14 at 14:20

Resetting Infinite Scroll for show new results retrieved via AJAX

1 Answers1

Linked