问题
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