Infinite scroll not fetching more pages when scrollbar isn't visible #3088
Description
I am trying some things out with select2 4.0.0 (select2-ng branch as of feb 26 2015) where I'm fetching items over AJAX and noticed that when the page size is small enough to fit all items from a page in the dropdown viewport (i.e. no vertical scrollbar is shown in the dropdown) then select2 won't fetch any more pages apart from the first one. As soon as the page size is increased so that the scrollbar is shown everything works as it's supposed to.
Tested in Mozilla Firefox 36.0
This is the select2() function I'm using. (sorry, no public API available)
// in document ready...
// A page size of 5 items breaks the functionality in my case, 6 items is ok!
var pageSize = 6;
$drivers.select2({
placeholder: { id: '-1', text: 'Select a driver' },
ajax: {
url: "http://localhost:52765/api/drivers",
dataType: 'json',
delay: 250,
data: function (params) {
return {
search: params.term, // search term
pageNumber: params.page || 1,
pageSize: pageSize
};
},
processResults: function (data, params) {
var ph = data.paginationHeader;
params.page = ph.currentPage;
var results = [];
$.each(data.items, function (key, value) {
console.log(value);
results.push({ id: value.driverId, text: value.surname + ", " + value.firstnames });
});
return {
results: results,
pagination: {
more: (ph.currentPage * ph.itemsPerPage) < ph.totalItems
}
};
},
cache: true,
transport: function (params, success, failure) {
var extractPaginationHeader = function (json, status, xhr) {
return {
items: json,
paginationHeader: JSON.parse(xhr.getResponseHeader('X-Pagination'))
};
};
var $request = $.ajax(params);
$request.then(extractPaginationHeader).then(success);
$request.fail(failure);
return $request;
}
},
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 0
});