Javascript.RU

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

Кнопка загрузить не скрывается
Здравствуйте! Проблема сЪела меня прошу помощи, вот скрипт, который по сути должен скрывать кнопку (ищё) если больше нечего подгружать, но не работает, что не так не понятно?

$(document).ready(function() {
// загружаем начальный блок
loadCatalog(0, 1);

// клик на кнопку "Еще"
$('#more').on('click', function() {
var showPage = $(this).data('show');
var preloadPage = parseInt(showPage) + 1;
loadCatalog(showPage, preloadPage);
}); 
});

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 = uri + '?page=' + preloadPage;
// загружаем ajax-ом контент следующей страницы, но не показываем его
$.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);
}
}
});
}


это сама кнопка
<button class="btn btn-block btn-warning" id="more" data-show="0" style="display:none;">Еще</button>

Последний раз редактировалось catalog, 16.09.2016 в 23:19.
Ответить с цитированием
  #2 (permalink)  
Старый 17.09.2016, 02:21
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от catalog
// создаем блок под новую загрузку
Зачем же создавать блок под загруженное, не зная еще будет ли оно?
Ответить с цитированием
  #3 (permalink)  
Старый 17.09.2016, 02:31
Новичок на форуме
Отправить личное сообщение для catalog Посмотреть профиль Найти все сообщения от catalog
 
Регистрация: 16.09.2016
Сообщений: 4

Сообщение от laimas Посмотреть сообщение
Зачем же создавать блок под загруженное, не зная еще будет ли оно?
Можно по конкретней, что не так?
Ответить с цитированием
  #4 (permalink)  
Старый 17.09.2016, 02:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от catalog
что не так
Жмем кнопку "Еще", в зависимости от ответа сервера производим действия - есть ответ, добавляем некий блок на страницу, в который помещаем ответ и прокручиваем до него, а нет ответа, значит и добавлять ничего не надо.

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

Сообщение от laimas Посмотреть сообщение
Жмем кнопку "Еще", в зависимости от ответа сервера производим действия - есть ответ, добавляем некий блок на страницу, в который помещаем ответ и прокручиваем до него, а нет ответа, значит и добавлять ничего не надо.

У вас сперва добавляется блок, а затем запрос, который еще не известно что вернет.
Вот рабочий пример того за что идёт речь: http://catalog.26th.ru
Тамм всё это работает а у меня проблема, не могу понять где дапущенна ошибка?
Ответить с цитированием
  #6 (permalink)  
Старый 17.09.2016, 05:07
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от catalog
не могу понять где дапущенна ошибка?
В логике. Добавление чего угодно на страницу нужно производить по результату ответа сервера, а не загодя "травку подстелить".

// создаем блок под новую загрузку
$('#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);
....
показываем кнопку и т.д..
}
Ответить с цитированием
  #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;
}
Ответить с цитированием
  #8 (permalink)  
Старый 17.09.2016, 10:41
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от catalog
если можете и не трудно внесите Пж изменения
Не могу.

Ну сделали вы это - "создаем блок под новую загрузку", выполняете запрос и он завершился неудачей, а код ничего не анализирует. Пробуем еще раз, и опять "создаем блок под новую загрузку", и под ID дублирующем ID блока предыдущего неудачного запроса?

setAttr(prmName,val) - эта химия вообще не нужна, а задержка ответа с пустой страницей при этом, затем анимация не очень то и радует. При этом клиент задает параметр сортировки ASC и DESC, да судя по именам и именами полей таблицы базы оперирует, знать бы еще как при этом поступает сервер.

Последний раз редактировалось laimas, 17.09.2016 в 10:56.
Ответить с цитированием
  #9 (permalink)  
Старый 20.09.2016, 14:05
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

Сообщение от catalog
scrollTop
У тебя наверх что ли загружается следующая порция?

Выкинь свой говнокод и сделай как у людей. Вот ТЗ.

1. Создать контейнер под загрузку списка.
2. Создать переменную в которую сохранить длину всего списка.
3. Загрузить в этот контейнер часть списка.
4. Вычесть из общего количества полученное.
5. Если результат вычитания больше нуля, то гоу ту п.3.
6. Иначе скрыть кнопку "Еще".
Ответить с цитированием
  #10 (permalink)  
Старый 20.09.2016, 14:10
Профессор
Отправить личное сообщение для warren buffet Посмотреть профиль Найти все сообщения от warren buffet
 
Регистрация: 08.07.2016
Сообщений: 1,332

laimas, ответ сервера тебе ничего не даст. Ответ сервера поступает ПОСЛЕ нажатия на еще, а тебе ее надо скрыть ДО бесполезного ответа сервера. Следовательно надо знать ДО того как, будут ли еще данные или нет. Чтобы это знать, надо получить эти данные на этапе загрузки самой страницы. При этом, если на сервере общее количество может изменяться, то придется и его еще передавать каждый раз и обновлять значение той самой переменной.

Например ты вводишь по 10, а записей всего 8. Значит у тебя сразу же кнопки "еще" не должно быть.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопка "Добавить в закладки": как сделать? pingvinludoed Javascript под браузер 0 11.04.2016 12:07
Не работает кнопка "Наверх" dle 9.3 dunek_ Opera, Safari и др. 1 25.05.2013 18:26
Кнопка с запросом Logo424 Javascript под браузер 12 20.05.2013 19:29
Появляющаяся/исчезающая кнопка при прокрутке страницы MailRes Элементы интерфейса 2 22.06.2011 11:49
как загрузить css из javascript GRean Javascript под браузер 19 17.04.2010 23:17