Почему pjax запрос заменяет один get-параметр другим?

Question

[Iossarian]

Добрый день. Есть раздел с отзывами на компании. В разделе два Select2 от Картика. Один для выбора компании, второй - для выбора оценки отзыва. Грубо говоря "Компания N", отзывы с оценкой 3.
Вывожу отзывы с помощью ListView и после выбора фильтра обновляю блок с помощью pjax. После выбора компании либо оценки в url летит выбранное значение, но проблема в том, что мне нужна возможность фильтрации по обоим параметрам одновременно - "Отзывы на компанию N с оценкой 3". Но сейчас выбор значения в одном списке перетирает в урле значение другого, т.е. одновременно в урле существует только 1 параметр. Как мне побороть эту проблему? Спасибо.

<?= Html::beginForm(Url::current(), 'GET', ['id' => 'filter-form']); ?>
        <?= Select2::widget([
            'name' => 'category_id',
            'id' => 'insurance',
            'value' => $insurance_id = Yii::$app->request->get('insurance') ? Yii::$app->request->get('insurance') : 'Все компании',
            'data' => ArrayHelper::merge(['' => 'Все компании'], ArrayHelper::map(ReviewCategory::find()->all(), 'id', 'title')),
            'size' => Select2::SIZE_LARGE,
            'pluginOptions' => [
                'tags' => true
            ],
            'options' => [
            ],
        ]) ?>
   
        <?= Select2::widget([
            'name' => 'rating',
            'id' => 'rating',
            'value' => Yii::$app->request->get('rating') ? Yii::$app->request->get('rating') : 'Любая оценка',
            'data' => ArrayHelper::merge(['' => 'Любая оценка'], ['1' => 1, '2' => 2, '3' => 3, '4' => 4, '5' => 5]),
            'size' => Select2::SIZE_LARGE,
            'pluginOptions' => [
                //'tags' => true,
                //'id' => 'rating',

            ],
            'options' => [
                'id' => 'rating',
            ],
        ]) ?>
    <?= Html::endForm(); ?>

$('#insurance').on('change', function() {
    $.pjax({
    
        timeout: 4000,
        url: $('#filter-form').attr('action'),
        container: '.my_class_for_summary',
        fragment: '.my_class_for_summary',
        scrollTo: true,
        replace: false,
        data: {insurance: this.options[this.selectedIndex].value},
   });
});
$('#rating').on('change', function() {
    $.pjax({
        timeout: 4000,
        url: $('#filter-form').attr('action'),
        container: '.my_class_for_summary',
        fragment: '.my_class_for_summary',
        scrollTo: true,
        data: {rating: this.options[this.selectedIndex].value},
   });
});

Comments

[Максим]

Вот вам не лень из php перегонять в js из js в php? Почему вы не выкинете этот Pjax и картика и не напишите все без посредников на чистом js или хотя бы jQuery, а лучше Vue или подобном frontend фреймворке?

Вот в этом вряд ли кто поможет. Такие вещи уже в современном мире мало кто использует.

[Iossarian]

Максим, сам бы написал, но опыта в программировании меньше года, поэтому велосипеды изобретать не хочется, да и js-фреймворками просто не владею пока что. Поэтому работаю с тем, что имею.

[Максим]

Iossarian, разобраться с Pjax у вас хватило толку, а вот с jQuery нет?) Да и я не сказал бы что Vue сложный. Если использовать его как js, то он вообще не сложный. Разобраться за пару дней можно.

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

Это у вас почти jQuery только с использованием функций Pjax.

$('#insurance').on('change', function() {
    $.pjax({
    
        timeout: 4000,
        url: $('#filter-form').attr('action'),
        container: '.my_class_for_summary',
        fragment: '.my_class_for_summary',
        scrollTo: true,
        replace: false,
        data: {insurance: this.options[this.selectedIndex].value},
   });
});
$('#rating').on('change', function() {
    $.pjax({
        timeout: 4000,
        url: $('#filter-form').attr('action'),
        container: '.my_class_for_summary',
        fragment: '.my_class_for_summary',
        scrollTo: true,
        data: {rating: this.options[this.selectedIndex].value},
   });
});

[Iossarian]

Максим, да не, с jq и ajax у меня более-менее. Просто столкнулся с такой задачей и pjax показался неплохим решением, причем он выполнил все мои условия, кроме сабжа.

[Дмитрий]

да не, с jq и ajax у меня более-менее.

Iossarian, вот и сделайте это на jq c ajax.

[Дмитрий]

Iossarian, у Вас два select на странице. Вот на событие change собирайте данные с двух списков и отправляйте на сервер.
На сервере обрабатываете данные и возвращаете назад.
Без kartik-a и pjax-a)))

[Iossarian]

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

[Дмитрий]

Iossarian, можно вернуть заполненный вид через renderAjax();

[Дмитрий]

Iossarian, вплоть до постраничной навигации

Answer 1

[Iossarian]

Ответ оказался гораздо проще

$('select').on('change', function() {
$insurance_id = $('#insurance').val() ?? 0;
$rating  = $('#rating').val() ?? 0;
    $.pjax({   
        timeout: 4000,
        url: $('#filter-form').attr('action'),
        container: '.my_class_for_summary',
        fragment: '.my_class_for_summary',
        scrollTo: true,
        replace: false,
        data: {insurance: insurance_id, rating: rating},
   });
});