Как получить url hash с AJAX используя jQuery, isotope и PHP?

REDGROUP
На сайте с 26.05.2021
Offline
14
239

Всем привет, делаю для себя небольшую галерейку, но при этом столкнулся с проблемой, используя плагин 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 код для получения данных из базы:

<?php
if(isset($_POST["limit"], $_POST["start"]))
{
 include "mysqli_connection.php";
 $query = "SELECT * FROM gallery ORDER BY order ASC LIMIT ".$_POST["start"].", ".$_POST["limit"]."";
 $result = mysqli_query($conn, $query);
 while ($row = mysqli_fetch_array($result)) {
?>                                                      
        <div class="col-md-3 grid-item <?= htmlspecialchars($row["category"]) ?>" data-category="<?= htmlspecialchars($row["category"]) ?>">
            <img data-src="/assets/images/gallery/<?= htmlspecialchars($row["image"]) ?>" data-srcset="/assets/images/gallery/<?= htmlspecialchars($row["image"]) ?>" class="img-fluid" alt="<?= htmlspecialchars($row["title"]) ?> Image" srcset="/assets/images/gallery/<?= htmlspecialchars($row["image"]) ?>" src="<?= htmlspecialchars($row["image"]) ?>">
        </div>

  <?php
    }
    mysqli_close($conn);
}
    ?>

Данные загружаются из базы данных и вроде все в порядке. Но при этом перестает работать фильтрация. Как заставить фильтрацию работать с ajax?

Как сделать так, чтобы при нажатии на определенную категорию загружались данные из определенной категории? С ajax и рабочим хешем URL, что-то вроде этого domain.com/#filter=category1 или domain.com/#filter=category3.

Буду очень благодарен за любой совет или помощь по этому вопросу, спасибо.


lutskboy
На сайте с 22.11.2013
Offline
180
#1

вешайте на переключатель таб атрибут data-category и по клике получите id категории. шлите на сервер и получаете данные.

снизу кнопка если надо подгрузить еще. там тоже  атрибут data-next то есть следующая страница . и все

REDGROUP
На сайте с 26.05.2021
Offline
14
#2
lutskboy #:

вешайте на переключатель таб атрибут data-category и по клике получите id категории. шлите на сервер и получаете данные.

снизу кнопка если надо подгрузить еще. там тоже  атрибут data-next то есть следующая страница . и все

А почему data-category? Весит сейчас data-filter на табах, при клике получаю имя категории. Без AJAX повторюсь этот фильтр работает, или для передачи этого необходимо использовать конкретно data-category?
Спасибо большое,  буду сейчас изучать это и пробовать, просто не очень понимаю как слать id или имя категории с помощью AJAX, если я ссылаюсь на сторонний обработчик (в моём случае fetch.php).

lutskboy
На сайте с 22.11.2013
Offline
180
#3
$(function(){
        $('.tab').click(function(){
                var category_id = $(this).data('category');
                $.post('/fetch.php',{category_id: category_id}, function(d){
                        
                });
        });
});

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий