Есть работающий jQuery плагин бесконечной прокрутки страницы, который подгружает данные из БД в нужном мне порядке. Порядок задается через его настройки по нажатию на одну из ссылок.
При первой загрузке на странице отображаются именно те данные которые требуются. Но если после клика на любую из ссылок начать прокручивать страницу запросы начинают суммироваться и на странице появляются дубликаты.
Код вызова плагина:
var per1 = 'all';
var per2 = 'all';
$(document).ready(function () {
$('section').empty();
$('section').scrollPagination({
category : per1,
filter :per2
});
});
$(document).ready(function () {
$('a[class="flow_category"]').click(function () {
per1 = $(this).attr('id');
$('section').empty();
$('section').scrollPagination({
category : per1,
filter : per2
});
});
});
Код самого плагина:
(function($) {
$.fn.scrollPagination = function(options) {
var settings = {
nop : 1, // Количество запрашиваемых из БД записей
offset : 0, // Начальное смещение в количестве запрашиваемых данных
error : 'THE END', // оповещение при отсутствии данных в БД
delay : 1000, // Задержка перед загрузкой данных
category: 'all',
filter : 'all'
}
// Включение опции для плагина
if(options) {
$.extend(settings, options);
}
return this.each(function() {
$this = $(this);
$settings = settings;
var offset = $settings.offset;
var busy = false; // переменная для обозначения происходящего процесса
// Текст кнопки, на основе параметров
$initmessage = $settings.error;
$this.append('<div class="content"></div><div id="wrap"><div id="main" class="clearfix"></div></div>');
// Функция AJAX запроса
function getData() {
// Формируется POST запрос к ajax.php
$.post('/function/ajax.php', {
action : 'scrollpagination',
number : $settings.nop,
offset : offset,
category : $settings.category,
filter : $settings.filter,
}, function(data) {
// Информируем пользователя
$this.find('.loading-bar').html($initmessage);
// Если возвращенные данные пусты то сообщаем об этом
if(data == "") {
$this.find('.loading-bar').html($settings.error);
}
else {
// Смещение увеличивается
offset = offset+$settings.nop;
// Добавление полученных данных в DIV content
$this.find('.content').append(data);
// Процесс завершен
busy = false;
}
});
}
getData(); // Запуск функции загрузки данных в первый раз
// .. и пользователь прокручивает страницу
$(window).scroll(function() {
// Проверяем пользователя, находится ли он в нижней части страницы
if($(window).scrollTop() + $(window).height() > $this.height() && !busy) {
$this.append('<div class="loading-bar">'+$initmessage+'</div>');
// Идет процесс
busy = true;
// Сообщить пользователю что идет загрузка данных
$this.find('.loading-bar').html('Загрузка данных...');
// Запустить функцию для выборки данных с установленной задержкой
setTimeout(function() {
getData();
}, $settings.delay);
}
});
});
}
})(jQuery);
Для наглядности можно вставить в код плагина alert($settings.nop); и сразу станет ясно что после клика плагин начинает срабатывать больше одного раза и продолжает суммировать. Вопрос в том: как убрать эти дубликаты из выдачи при прокрутке??
Буду благодарен за любой дельный совет, так как за 3 дня самостоятельного поиска и перебора ответ я так и не нашел. Единственное к чему пришел, что проблема как мне кажется кроется в ajax запросе.
Для наглядности в новостной ленте ВКонтакте бесконечная прокрутка реализована именно так как нужно. При переключении между "Показать все новости" и "Показать наиболее интересные" данные перестраиваются, бесконечная прокрутка продолжает работать и обновляется лишь сама лента.
