При помощи Pjax отображать необходимый контент

В меня есть форма, где есть dropDownList, в котором можно выбрать определенную коллекцию. При нажатие на один из элементов списка должна отображаться информация в DetailView про выбранную коллекцию: название, описание и цена. Данные должны отображаться динамически, то есть без перезагрузки страницы. Для этого я обратился к помощи Pjax. На данном этапе я не совсем понятно, как можно организовать отображение данных про определенную коллекцию при нажатии на элемент списка. Из списка нужно как-то изъять url для каждого представления коллекцию. Я пытаюсь добиться такого результата, как на картинке:

введите сюда описание изображения

Представление выглядит таким образом:

<div class="collection-list">

    <?php Pjax::begin(['id' => 'grid-collection-form']) ?>
        <?php $form = ActiveForm::begin([
            'method' => 'get',
            'options' => ['data-pjax' => true]
        ]); ?>

        <?php $collections = Collection::find()->all();
        $items = ArrayHelper::map($collections,'id','name');
        $params = [
            'prompt' => 'Вкажіть назву колекції'
        ]; ?>

        <?= $form->field($model, 'name')->label(false)->dropDownList($items,$params); ?>

        <?php ActiveForm::end(); ?>
    <?php Pjax::end(); ?>

    <?php Pjax::begin(['id' => 'grid-collection']); ?> 
    <?= DetailView::widget([
        'model' => $model,
        'attributes' => [
            'name',
            'price',
            'description',
        ],
    ]) ?>
    <?php Pjax::end(); ?>

</div>

<?php
 
$this->registerJs(
   '$("document").ready(function(){ 
        $("#grid-collection-form").on("pjax:end", function() {
            $.pjax.reload({container:"#grid-collection", timeout: "5000"});  
        });
    });'
);
?> 

Ответы (0 шт):