Как применить фильтры по get параметру при переходе на прошлую страницу?

Question

[ne_pes]

Добрый день!
На сайте есть ajax фильтр, который без перезагрузки страницы фильтрует статьи и добавляет get параметры в url через history.pushState().
Если я несколько раз нажму на разные фильтры, то get параметр будет меняться и применяться фильтр, например site.ri/catalog/?event_num=123 или site.ri/catalog/?event_num=123&date_val=now и тп.
Все работает хорошо, но при возврате на прошлую страницу url меняется, но фильтрация не происходит, страница вообще не меняется. Как это можно исправить?

Answer 1

[Denis Melnikov]

При загрузке страницы, получать Get параметры и передавать в фильтр

Comments

[ne_pes]

Фильтры на ajax и url меняется только через history.pushState() так что загрузки страницы нет, все без перезагрузки

[Denis Melnikov]

ne_pes, ну так если отрабатывает событие history.pushState() , значит его можно отловить ? или следом за ним сделать фильтр

[ne_pes]

Вы видимо не поняли вопрос.
При клике фильтр работает исправно, фильтр применился и через history.pushState() к url добавилbcm get параметры. Проблема в том, что фильтр не срабатывает при переходе на прошлую страницу (стрелочка назад в браузере).

[Denis Melnikov]

ne_pes, эт я понял =) Поэтому и говорю =) Что вам надо получить при переходе GET параметры, и снова вызвать фильтрацию с новыми.

Тут вопрос в том, на каком этапе фильтруется
Если на фронте, то вызывайте на фронте, если нет, то вам надо передать новый массив фильтров на бек.

[ne_pes]

Вот js ajax. Сам вывод формируется в php файле. Как отловить этот переход назад?

$(document).on('catalog_filter_ajax_request', function (e, url, element) {
        if(eventRequest){
            eventRequest.abort();
        }
        $.ajax({
            url: url,
            type: 'GET',
            dataType: 'html',
            beforeSend: function(){
                $('#ajax-container').addClass('loading');
            },
            success: function(response){
                history.pushState(null, null, url);
                $('#ajax-container').removeClass('loading');
                $('#ajax-container').replaceWith($(response).find('#ajax-container'));
                initDatePicker();
            }
        });
        return false;
    })