Сообщение от laimas
|
В логике. Добавление чего угодно на страницу нужно производить по результату ответа сервера, а не загодя "травку подстелить".
// создаем блок под новую загрузку
$('#catalog').append('<div id="page' + preloadPage + '"></div>');
....
// загружаем ajax-ом контент следующей страницы, но не показываем его
$.ajax({
....
success: function(html) {
....
$('#page' + preloadPage).html(html);
А должно быть
$.ajax({
....
success: function(html) {
if(html) {
$('<div id="page' + preloadPage + '"/>').appendTo('#catalog').html(html);
....
показываем кнопку и т.д..
}
|
Спасибо но я далёкий от js вот полноценный код, если можете и не трудно внесите Пж изменения?
$(document).ready(function() {
// загружаем начальный блок
loadCatalog(0, 1);
// клик на кнопку "Еще"
$('#more').on('click', function() {
var showPage = $(this).data('show');
var preloadPage = parseInt(showPage) + 1;
loadCatalog(showPage, preloadPage);
});
// клик по кнопкам сортировки
$('.sort button').on('click', function() {
$('.sort button').removeClass('active');
$(this).addClass('active');
uri = setAttr('sortby', $(this).data('sort'));
uri = setAttr('sortdir', $(this).data('sortdir'));
$('#catalog').html('');
loadCatalog(0, 1);
return false;
});
// клик по кнопкам фильтра
$('.filter .filter-group button').on('click', function() {
var filter_group = $(this).parent('.filter-group');
var active = $(this).hasClass('active');
var filter = $(this).data('filter');
var value = '';
if (filter == 'category') { // категорий может быть выбрано несколько (checkbox)
$(this).toggleClass('active');
var categories = '';
$('.filter button[data-filter="category"].active').each(function() {
categories += $(this).data('value') + '|';
});
value = categories.substr(0, categories.length - 1);
}
else { // остальные фильтры (язык и формат) - только один вариант (radiobutton)
filter_group.find('button').removeClass('active');
if (!active) {
$(this).addClass('active');
value = $(this).data('value');
}
}
uri = setAttr(filter, value);
$('#catalog').html('');
loadCatalog(0, 1);
return false;
});
});
// скрываем кнопку "Еще"
function loadCatalog(showPage, preloadPage) {
$('#more').hide();
// показываем блок с ранее загруженным контентом и прокручиваем к нему
if (showPage != 0) {
$('#page' + showPage).show('slow');
$('html,body').animate({ scrollTop: $('#page' + showPage).offset().top - 100 }, 1000);
}
// создаем блок под новую загрузку
$('#catalog').append('<div id="page' + preloadPage + '"></div>');
uri = setAttr('page', preloadPage);
// загружаем контент следующей страницы, но не показываем его
$.ajax({
url: uri,
cache: false,
success: function(html) {
if (html != '') {
$('#more').data('show', preloadPage);
$('#more').show();
$('#page' + preloadPage).hide();
$('#page' + preloadPage).html(html);
if (preloadPage == 1) loadCatalog(1, 2);
}
}
});
}
// функция заменяет get-параметр в строке параметров uri (либо добавляет; либо удаляет, если передать val='')
function setAttr(prmName,val) {
var res = '';
var d = uri.split("?");
var base = d[0];
var query = d[1];
if(query) {
var params = query.split("&");
for(var i = 0; i < params.length; i++) {
var keyval = params[i].split("=");
if(keyval[0] != prmName) {
res += params[i] + '&';
}
}
}
if (val != '') res += prmName + '=' + val;
return base + '?' + res;
}