- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
VK приобрела 70% в структуре компании-разработчика red_mad_robot
Которая участвовала в создании RuStore
Оксана Мамчуева
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Всем привет, делаю для себя небольшую галерейку, но при этом столкнулся с проблемой, используя плагин isotope + jQuery
В качестве разметки я использую https://codepen.io/Sool/pen/vvodgj , но при этом с небольшими изменениями, для поддержки url hash, то есть domain.com/#filter=имякатегории работает, но как только я подключаю ajax и вывожу данные из базы, то переключение и поддержка url hash перестают работать.
Isotope JS Code:
$(document).ready(function($) { var $grid = $('.grid').isotope({ // options itemSelector: '.grid-item', layoutMode: 'fitRows', }); var filterFns = { // show if number is greater than 50 numberGreaterThan50: function() { var number = $(this).find('.number').text(); return parseInt(number, 10) > 50; }, // show if name ends with -ium ium: function() { var name = $(this).find('.name').text(); return name.match(/ium$/); } }; function getHashFilter() { // get filter=filterName var matches = location.hash.match(/filter=([^&]+)/i); var hashFilter = matches && matches[1]; return hashFilter && decodeURIComponent(hashFilter); } // change is-checked class on buttons var $buttonGroup = $('.filters'); $buttonGroup.on('click', 'li', function(event) { $buttonGroup.find('.is-checked').removeClass('is-checked'); var $button = $(event.currentTarget); $button.addClass('is-checked'); var filterValue = $button.attr('data-filter'); // set filter in hash location.hash = 'filter=' + encodeURIComponent(filterValue); $grid.isotope({ filter: filterValue }); }); var isIsotopeInit = false; function onHashchange() { var hashFilter = getHashFilter(); if (!hashFilter && isIsotopeInit) { return; } isIsotopeInit = true; // filter isotope $grid.isotope({ itemSelector: '.element-item', layoutMode: 'fitRows', // use filterFns filter: filterFns[hashFilter] || hashFilter }); // set selected class on button if (hashFilter) { $buttonGroup.find('.is-checked').removeClass('is-checked'); $buttonGroup.find('[data-filter="' + hashFilter + '"]').addClass('is-checked'); } } $(window).on('hashchange', onHashchange); // trigger event handler to init Isotope onHashchange(); })AJAX Code:
$(document).ready(function() { var limit = 7; var start = 4; var action = 'inactive'; function load_country_data(limit, start) { $.ajax({ url: "fetch.php", method: "POST", data: { limit: limit, start: start }, cache: false, success: function(data) { $('#load_data').append(data); if (data == '') { $('#load_data_message').html("<button type='button'>All images loaded</button>"); action = 'active'; } else { $('#load_data_message').html("<button type='button'>Loading images.....</button>"); action = "inactive"; } } }); } if (action == 'inactive') { action = 'active'; load_country_data(limit, start); } $(window).scroll(function() { if ($(window).scrollTop() + $(document).height() > $("#load_data").height() && action == 'inactive') { action = 'active'; start = start + limit; setTimeout(function() { load_country_data(limit, start); }, 1000); } }); });PHP код для получения данных из базы:
Данные загружаются из базы данных и вроде все в порядке. Но при этом перестает работать фильтрация. Как заставить фильтрацию работать с ajax?
Как сделать так, чтобы при нажатии на определенную категорию загружались данные из определенной категории? С ajax и рабочим хешем URL, что-то вроде этого domain.com/#filter=category1 или domain.com/#filter=category3.
Буду очень благодарен за любой совет или помощь по этому вопросу, спасибо.
вешайте на переключатель таб атрибут data-category и по клике получите id категории. шлите на сервер и получаете данные.
снизу кнопка если надо подгрузить еще. там тоже атрибут data-next то есть следующая страница . и все
вешайте на переключатель таб атрибут data-category и по клике получите id категории. шлите на сервер и получаете данные.
снизу кнопка если надо подгрузить еще. там тоже атрибут data-next то есть следующая страница . и все
А почему data-category? Весит сейчас data-filter на табах, при клике получаю имя категории. Без AJAX повторюсь этот фильтр работает, или для передачи этого необходимо использовать конкретно data-category?
Спасибо большое, буду сейчас изучать это и пробовать, просто не очень понимаю как слать id или имя категории с помощью AJAX, если я ссылаюсь на сторонний обработчик (в моём случае fetch.php).
$(function(){
$('.tab').click(function(){
var category_id = $(this).data('category');
$.post('/fetch.php',{category_id: category_id}, function(d){
});
});
});