16.09.2016, 23:16
|
Новичок на форуме
|
|
Регистрация: 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.
|
|
17.09.2016, 02:21
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от catalog
|
// создаем блок под новую загрузку
|
Зачем же создавать блок под загруженное, не зная еще будет ли оно?
|
|
17.09.2016, 02:31
|
Новичок на форуме
|
|
Регистрация: 16.09.2016
Сообщений: 4
|
|
Сообщение от laimas
|
Зачем же создавать блок под загруженное, не зная еще будет ли оно?
|
Можно по конкретней, что не так?
|
|
17.09.2016, 02:54
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от catalog
|
что не так
|
Жмем кнопку "Еще", в зависимости от ответа сервера производим действия - есть ответ, добавляем некий блок на страницу, в который помещаем ответ и прокручиваем до него, а нет ответа, значит и добавлять ничего не надо.
У вас сперва добавляется блок, а затем запрос, который еще не известно что вернет.
|
|
17.09.2016, 04:50
|
Новичок на форуме
|
|
Регистрация: 16.09.2016
Сообщений: 4
|
|
Сообщение от laimas
|
Жмем кнопку "Еще", в зависимости от ответа сервера производим действия - есть ответ, добавляем некий блок на страницу, в который помещаем ответ и прокручиваем до него, а нет ответа, значит и добавлять ничего не надо.
У вас сперва добавляется блок, а затем запрос, который еще не известно что вернет.
|
Вот рабочий пример того за что идёт речь: http://catalog.26th.ru
Тамм всё это работает а у меня проблема, не могу понять где дапущенна ошибка?
|
|
17.09.2016, 05:07
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от 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);
....
показываем кнопку и т.д..
}
|
|
17.09.2016, 06:16
|
Новичок на форуме
|
|
Регистрация: 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;
}
|
|
17.09.2016, 10:41
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,989
|
|
Сообщение от catalog
|
если можете и не трудно внесите Пж изменения
|
Не могу.
Ну сделали вы это - "создаем блок под новую загрузку", выполняете запрос и он завершился неудачей, а код ничего не анализирует. Пробуем еще раз, и опять "создаем блок под новую загрузку", и под ID дублирующем ID блока предыдущего неудачного запроса?
setAttr(prmName,val) - эта химия вообще не нужна, а задержка ответа с пустой страницей при этом, затем анимация не очень то и радует. При этом клиент задает параметр сортировки ASC и DESC, да судя по именам и именами полей таблицы базы оперирует, знать бы еще как при этом поступает сервер.
Последний раз редактировалось laimas, 17.09.2016 в 10:56.
|
|
20.09.2016, 14:05
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
Сообщение от catalog
|
scrollTop
|
У тебя наверх что ли загружается следующая порция?
Выкинь свой говнокод и сделай как у людей. Вот ТЗ.
1. Создать контейнер под загрузку списка.
2. Создать переменную в которую сохранить длину всего списка.
3. Загрузить в этот контейнер часть списка.
4. Вычесть из общего количества полученное.
5. Если результат вычитания больше нуля, то гоу ту п.3.
6. Иначе скрыть кнопку "Еще".
|
|
20.09.2016, 14:10
|
Профессор
|
|
Регистрация: 08.07.2016
Сообщений: 1,332
|
|
laimas, ответ сервера тебе ничего не даст. Ответ сервера поступает ПОСЛЕ нажатия на еще, а тебе ее надо скрыть ДО бесполезного ответа сервера. Следовательно надо знать ДО того как, будут ли еще данные или нет. Чтобы это знать, надо получить эти данные на этапе загрузки самой страницы. При этом, если на сервере общее количество может изменяться, то придется и его еще передавать каждый раз и обновлять значение той самой переменной.
Например ты вводишь по 10, а записей всего 8. Значит у тебя сразу же кнопки "еще" не должно быть.
|
|
|
|