Какой может быть простой вариант фильтрации без обновления страницы и есть ли готовые варианты?

Question

[Евгений]

Как сделать фильтрацию без обновления страницы умеют все в том числе и такой как я.

Но суть такая. При изменении параметров фильтрации. Например ползунок цены меняется или галочку поставил "Intel Core i7" и тут же выборка ноутбуков меняется. Понятное дело, что работать нужно с Ajax или Pjax. Но есть ли уже готовые решения чтобы не изобретать велосипед?

А если писать с нуля как проще это сделать?

На ивент изменения значения поля фильтрации аякс посылать , получать данные и на основе данных в Success уже отправлять вёрстку при помощи JQuery?

Допустим фильтрация будет по ползунку цены, по типу процессора, по типу ноутбука и по разрешению экрана.

Comments

[Евгений]

gridView или listView обвернутые в виджет Pjax и форма с фильтрами. Все есть из коробки, примеров в сети миллион.

Поищу. Я просто пока практикуюсь динамической фильтрации и сортировке. Пагинация работает.

Вот примерно как должно быть. Т е я изменяю цену и тут же список ноутбуков меняется. Ставлю галочку - меняется.

Про набор бессвязных изречений.
"На ивент изменения значения"-

$('#price').on('change', function (e)
    {}

"поля фильтрации аякс посылать" - описал выше суть)
"получать данные и на основе данных в Succes" - тут все ок
"отправлять вёрстку при помощи JQuery" - Можно и нативным js отправить же

Answer 1

[Артем]

Без обновления страницы - только Ajax или JS-фреймворки (которые тоже будут использовать Ajax).
Не в IFRAME же, в самом деле, в 2018 году контент грузить.

На ивент изменения значения поля фильтрации аякс посылать , получать данные и на основе данных в Success уже отправлять вёрстку при помощи JQuery?

Лучше не верстку отправлять, а JSON отправлять, а затем javascript'ом его в вёрстку превращать.

Comments

[Евгений]

Я это и хотел сказать. Неверно выразился. JSON будет. Но ведь аякс нужно на что-то повесить. Правильно ли будет если я его повешу на ивент изменения полей фильтрации? Допустим изменил пользователь диапазон цен нужный ему - сразу же подбирает. Поставил галочку Intel core i 7 и тут же подбирает ноутбуки на core i 7.

Я это представляю себе так. Но верно ли это?

[Артем]

Евгений, Да, конечно, на изменение любого поля фильтрации нужно повесить обработчик, который сделает запрос к серверу и перезаполнит таблицу с результатами.

[Евгений]

Артем, Понял, реализую. Я вроде как научился с PJAX работать. По крайней мере то что я думал делать, вроде получилось. Завтра попробую сделать фильтрацию и сортировку. Ну а потом на закуску по сложнее. Сравнение товаров. Как я понимаю для сравнения нужно использовать сессии либо куки?

[Артем]

Евгений, да что угодно можно использовать ) можно в сессии-куки сохранять, можно в локалсторейдж, можно в бд юзеру сохранять (это если вы хотите, чтобы юзер с другого компа мог зайти и тоже сравнить)

[Евгений]

Артем, Бд точно нет) А другие варианты попробую) Тут ещё такая шляпа

Есть у меня ползунок

<div class="aside">
                    <h3 class="aside-title">Цена</h3>
                    <div class="price-filter">
                        <div id="price-slider"></div>
                        <div class="input-number price-min">
                            <input id="price-min" type="number">
                            <span class="qty-up">+</span>
                            <span class="qty-down">-</span>
                        </div>
                        <span>-</span>
                        <div class="input-number price-max">
                            <input id="price-max" type="number">
                            <span class="qty-up">+</span>
                            <span class="qty-down">-</span>
                        </div>
                    </div>
                </div>

И я не могу понять к чему тут аякс прицепить)

[Артем]

Евгений, спаны qty-up и qty-down сделать кнопками и на них
а также на изменение price-min и price-max

[Евгений]

Артем, Спасибо, попробую

[Евгений]

Артем, Движение ползунка не вызывает срабатывания аякса. А вот + и - вызывает. Печальнеько)

[Артем]

ищите в документации к API вашего слайдера event на изменение и подписывайтесь на него, в обработчике уже отправляйте нужный вам запрос

[Евгений]

Артем, Это не API. Просто шаблон переделанный) Так как я не верстальщик. Поищу потом ползунок где-нибудь у которого есть событие.

Только вот смотрите. Я протестировал уже при изменении цены меняется выборка. Но пока я вешал аякс чисто на ивент изменения прайса.

Но у меня ещё будут чекбоксы, радиобатоны. Штук 8 -10. И все это параметры фильтрации.

Это получается нужно написать аякс, который если хотя бы один из 10 ивентов полей фильтрации возвращает тру, сразу же отправлять аякс с заданными параметрами. Причём написать проверку чтобы лишних параметров не засылало если какое-то поле фильтрации не менялось.

[Артем]

Евгений, Ну я бы не так сделал
Сделал бы функцию типа Send.
В ней бы сделал объект post_data, в который бы пихал значения всех чекбоксов и инпутов, при изменении которых надо делать запрос на сервер.
При каждом изменении соответствующего чекбокса вызывал бы функцию Send.
Пусть засылает лишние параметры, зачем что-то фильтровать? 500 байт трафика экономить? ))
Набросаю скелет функции для лучшего понимания:

function Send() {
    var post_data = {
      price: $("price").val(),
      display: $("display").val(),
      memory: $("memory").val()
    }

    $.post(url, post_data);
}

$("price").on("click", function() {
   Send();
});

$("display").on("click", function() {
   Send();
});

...

[Евгений]

Артем, Если засылать все параметры , тогда на сервере нужно проверку делать на null.
Допустим вот сервер отправляет список ноутбуков который находятся в диапазоне цены которую я выбрал

if (Yii::$app->request->isAjax && Yii::$app->request->isPost)
        {
            $selection = Yii::$app->request->post('a');
            $answeronajax = Notebooks::find()
                ->where(['between', 'price', $selection[0], $selection[1]])->all();

            return $this->asJson([$answeronajax]);

        }
        return $this->render('catalog');

И по сути при фильтрации в where будет довольно длинный списочек) И если я зашлю все пераметры, а выбор какого-то фильтра сделан не был, то по сути ничего оно и не зашлёт. А вот получить данные у модели надо) Блин не знаю как это вам правильно объяснить)

[Артем]

Евгений, На сервере в любом случае нужно валидировать все данные, независимо от того, менялись они или нет.
Длинный список условий в where для БД большой проблемой не является. Да и насколько длинный? 20-30 параметров? Фигня вообще.

[Артем]

то по сути ничего оно и не зашлёт

Зашлет, если сделаете, как я в примере написал, т.к. функция в моем примере берет текущие значения всех контролов.

[Евгений]

Артем, Хорошо, завтра попробую так как первичную схему бд я накидал и уже с ней можно работать. Спасибо

[Артем]

Евгений, Отметьте решением, если не затруднит

Answer 2

[Максим Тимофеев]

с Ajax или Pjax

Pjax использует AJAX, так что "или между ними не уместно"

Но есть ли уже готовые решения чтобы не изобретать велосипед?

gridView или listView обвернутые в виджет Pjax и форма с фильтрами. Все есть из коробки, примеров в сети миллион.

А если писать с нуля как проще это сделать?

Написать свой Pjax и свой listView, но зачем? Смысл есть только если отказываться надо от jquery в пользу vue, в других случаях не вижу смысла изобретать велосипед.

Допустим фильтрация будет по ползунку цены, по типу процессора, по типу ноутбука и по разрешению экрана.

Какая разница? Хоть по размеру пипирки. При чем тут это?

На ивент изменения значения поля фильтрации аякс посылать , получать данные и на основе данных в Success уже отправлять вёрстку при помощи JQuery?

набор бессвязных изречений.
"На ивент изменения значения"- что?
"поля фильтрации аякс посылать" - моя твоя не понимать
"получать данные и на основе данных в Succes" - тут все ок
"отправлять вёрстку при помощи JQuery" - а до этого при помощи чего все происходило?