@SaintB
Веб-разработчик

Как обновить результаты фильтра кнопкой?

Вся история происходит на WordPress. Только начинаю вникать в скрипты, есть трудность. Имеется фильтр, сделан выпадающим списком,

<select name="cat" id="fat-event-filter-category" class="postform">
<option value="0" selected="selected">ВЫБРАТЬ ГОРОД</option>
<option class="level-0" value="39">Астрахань</option>
<option class="level-0" value="40">Бамберг</option>
<option class="level-0" value="41">Барнаул</option>
<option class="level-0" value="43">Вильнюс</option>
<option class="level-0" value="45">Дюссельдорф</option>
<option class="level-0" value="46">Иркутск</option>
<option class="level-0" value="47">Красноярск</option>
<option class="level-0" value="48">Минск</option>
<option class="level-0" value="49">Москва</option>
<option class="level-0" value="50">Новокузнецк</option>
<option class="level-0" value="51">Новосибирск</option>
<option class="level-0" value="52">Прага</option>
<option class="level-0" value="53">Рига</option>
<option class="level-0" value="54">Ростов-на-Дону</option>
<option class="level-0" value="55">Сочи</option>
<option class="level-0" value="56">Таллин</option>
<option class="level-0" value="57">Томск</option>
<option class="level-0" value="58">Мангейм</option>
</select>

FatEvent.initFilter = function () {
    $('.fat-event-filter-container select, .fat-event-filter-container input').on('change', function (event) {
        var self = $(this),
            container = self.closest('.fat-event-container');

        $('.fat-event-sc', container).css('opacity', 0);
        FatEvent.showLoading(container);

        $.ajax({
            url: fat_event_ajax.ajaxurl,
            type: 'GET',
            data: ({
                action: 'fat_event_filter',
                sc_id: container.attr('data-sc-id'),
                date: typeof $('#fat-event-date', container).val() != 'undefined' ? $('#fat-event-date', container).val() : '',
                name: $('#fat-event-filter-name', container).val(),
                tag: $('#fat-event-filter-tag').val(),
                category: $('#fat-event-filter-category', container).val(),
                location: $('#fat-event-filter-location', container).val(),
                organizer: $('#fat-event-filter-organizer', container).val(),
                current_page: 1,
                layout: container.attr('data-layout')
            }),
            success: function (data) {
                FatEvent.closeLoading(container);
                if(container.attr('data-layout')=='table'){
                    FatEvent.bindTableItem(container, data);
                }else{
                    FatEvent.bindItem(container, data);
                }
            },
            error: function () {
                FatEvent.closeLoading(container);
                $('.fat-event-sc', container).css('opacity', 1);
            }
        });
    });

    $('.fat-event-filter-container ul.fat-event-filter a').off('click').on('click', function (event) {
        event.preventDefault();
        var container = $(this).closest('.fat-event-container'),
            ul = $(this).closest('.fat-event-filter');

        $('.fat-event-sc', container).css('opacity', 0);
        FatEvent.showLoading(container);

        $('a.active', ul).removeClass('active');
        $(this).addClass('active');

        $.ajax({
            url: fat_event_ajax.ajaxurl,
            type: 'GET',
            data: ({
                action: 'fat_event_filter',
                sc_id: container.attr('data-sc-id'),
                date: typeof $('#fat-event-date', container).val() != 'undefined' ? $('#fat-event-date', container).val() : '',
                name: '',
                tag: '',
                category: $('a.fat-event-filter-category.active', container).attr('data-value'),
                location: $('a.fat-event-filter-location.active', container).attr('data-value'),
                organizer: $('a.fat-event-filter-organizer.active', container).attr('data-value'),
                current_page: 1,
                layout: container.attr('data-layout')
            }),
            success: function (data) {
                FatEvent.closeLoading(container);
                if(container.attr('data-layout')=='table'){
                    FatEvent.bindTableItem(container, data);
                }else{
                    FatEvent.bindItem(container, data);
                }

            },
            error: function () {
                FatEvent.closeLoading(container);
                $('.fat-event-sc', container).css('opacity', 1);
            }
        });

        return false;
    })
};

Изначально представлены первые три результата из всех, т.к. остальные скрыты , остальные раскрываются кнопкой
<button id="b-link" class="ac" value="0" selected="selected">ВСЕ КОНЦЕРТЫ ❯</button>

var link = document.getElementById("b-link"),
box = document.getElementById("box");
link.onclick = function(){
box.classList.add("open");
}

Задача в том, чтобы даже когда выбран «Архангельск» — при клике на «ВСЕ КОНЦЕРТЫ ❯» раскрывались все концерты, как по дефолту.

Надеюсь понятно описал, очень срочная задача, хочется понять что к чему. Спасибо

Нашел решение
jQuery(document).ready(function($){
var $selectbox = $("#fat-event-filter-category");

// Клик по кнопке "Сброс"
$('#block').on('click', '.ac', function() {
  $selectbox.prop('selectedIndex', 0);

});
 return false;
});

Но оно только ставит фильтр на первую позицию, но не обновляет результат
  • Вопрос задан
  • 47 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы