Показать сообщение отдельно
  #7 (permalink)  
Старый 17.09.2016, 06:16
Новичок на форуме
Отправить личное сообщение для catalog Посмотреть профиль Найти все сообщения от catalog
 
Регистрация: 16.09.2016
Сообщений: 4

Сообщение от 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;
}
Ответить с цитированием