Как отобразить часть контента используя Pjax yii2?

Question

[Иван Лыков]

Добрый день, вопрос.
Есть сайт бар. В нем есть категории и форма поиска. Форма поиска - select2 уже прикрученный и работающий при вводе в форму выдает результаты с базы.
Вопрос в другом, как реализовать такую вещь, не могу понять. При вводе данных в поисковую строку, в правой колонке, выводило результат в левой колонке.
скрин для понимания

Я смотрел примеры pjax, здесь https://nix-tips.ru/yii2-vnikaem-v-pjax.html
Но так и не сообразил, где и как оборачивать виджет для его работы
по сути, отправить данные с одной формы, получить динамично в другой...

Answer 1

[Дмитрий]

Добрый день.
У Вас есть выпадающий список

<select name="spjax" id="spjax">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Где-то в другом месте страницы есть блок, который надо обновить. При обновлении к заголовку необходимо добавить значение переменной $Ipjax. Оборачиваем этот блок Pjax и добавляем пользовательский js.

<?php
   Pjax::begin([
       'id' => 'view-mode-pjax'
   ])
?>
<div class="col-lg-4">
    <h2>Heading <?= $Ipjax ?></h2>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
        dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
        ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
        fugiat nulla pariatur.</p>

    <p><a class="btn btn-default" href="http://www.yiiframework.com/doc/">Yii Documentation &raquo;</a></p>
</div>
<?php
  Pjax::end();
$this->registerJs("
$(function(){
  $('#spjax').on('change', function(){
    var Id = $(this).val()
    console.log(Id)
    $.pjax.reload({
        container: \"#view-mode-pjax\", // контейнер, в котором надо обновить данные.
        url: window.location.href,
        timeout: 0,
        data: {
           'id': Id // данные, которые отправляются на сервер.
        },
    });
  })  
})    
", View::POS_END)
?>

А в контроллере, в действии, которое подключает данный вид передаёте нужную переменную.

public function actionIndex()
{
    $Ipjax = Yii::$app->request->get('id') ?: null;
    return $this->render('index', ['Ipjax' => $Ipjax]);
}

Отлавливаете изменение выпадающего списка и запускаете pjax. Идёт запрос на сервер, проверяется переменная и возвращается всё тот же вид, но уже с переменной.
И Pjax, ушлый зверёк, обновит не всю страницу, а только тот блок, который Вы укажите.

p.s. Пример сделан на yii2-basic, в файле views/index и в DefaultController.

Comments

[Иван Лыков]

Огромное спасибо за совет буду пробовать, спасибо!

[Дмитрий]

Иван Лыков, пожалуйста, только это не совет, а решение. Подставьте свои данные и пользуйтесь на здоровье.)))

[Иван Лыков]

slo_nik, Все одно спасибо) что поделились опытом)

[Иван Лыков]

slo_nik, Буду разбираться)

[Dmitry Bay]

Иван Лыков, слишком поздно решили разбираться. pjax выпилят скоро.

[Иван Лыков]

slo_nik, Можно еще вопрос,
Вот сижу думаю. Все работает как нужно, это только в поиске, там форма.
А как подгрузить данные если формы нету, через тег "а" средствами yii2 через хелпер.
По нажатию на категорию подгрузить данные которые в себе имеет. Мне важен сам запрос pjax как правильно обратится?

[Дмитрий]

Иван Лыков, в pjax есть параметр, в котором указывается селектор ссылки.

[Иван Лыков]

slo_nik, Это он?
https://www.yiiframework.com/doc/api/2.0/yii-widge...

[Дмитрий]

Иван Лыков, да

[Bonaventura72]

Спасибо за пример, очень помогли разобраться что за зверь такой pjax!

[Александр Вербицкий]

Дмитрий, Добрый день! Подскажите, а чтобы этот get запрос попал в url нужно использовать history.pushState('', '', newUrl) или у pjax есть свои методы для этого?