yii2
Pjax
Поиск…
Шаг 1 Добавить структуру
В views \ site \ form-submission.php
<?php Pjax::begin(['id'=>'id-pjax']); ?>
<?= Html::beginForm(['site/form-submission'], 'post', ['data-pjax' => '', 'class' => 'form-inline']); ?>
<?= Html::input('text', 'string', Yii::$app->request->post('string'), ['class' => 'form-control']) ?>
<?= Html::submitButton('Hash String', ['class' => 'btn btn-lg btn-primary', 'name' => 'hash-button']) ?>
<?= Html::endForm() ?>
<h3><?= $stringHash ?></h3>
<?php Pjax::end(); ?>
Шаг 2 Код на стороне сервера
public function actionFormSubmission()
{
$security = new Security();
$string = Yii::$app->request->post('string');
$stringHash = '';
if (!is_null($string)) {
$stringHash = $security->generatePasswordHash($string);
}
return $this->render('form-submission', [
'stringHash' => $stringHash,
]);
}
как использовать pjax
Добавьте эту строку в начало вашего просмотра.
<?php
use yii\widgets\Pjax;
?>
Добавьте следующие две строки вокруг содержимого, для которого требуется частичное обновление.
<?php Pjax::begin(['id'=>'id-pjax']); ?>
Content that needs to be updated
<?php Pjax::end(); ?>
перезагрузить pjax
$.pjax.reload({container: '#id-pjax'});
использовать аргумент таймаута в pjax
<?php Pjax::begin(['id'=>'id-pjax', 'timeout' => false]); ?>
вы можете указать целочисленное значение для аргумента тайм-аута, для которого будет ожидаемое количество миллисекунд (его значение по умолчанию - 1000). Если время выполнения на сервере больше указанного значения таймаута, будет запущена полная загрузка страницы.
По умолчанию pjax отправит форму с использованием метода GET. Вы можете изменить способ отправки формы на POST, как в следующем примере
<?php Pjax::begin(['id'=>'id-pjax', 'timeout' => false, 'clientOptions' => ['method' => 'POST']]); ?>
Расширенное использование Pjax
Yii Framework 2.0 поставляется со встроенной поддержкой Pjax , библиотеки JavaScript, которая уменьшает время загрузки страницы. Он выполняет это, только обновляя часть страницы, которая изменилась через Ajax, что может привести к значительной экономии, если на ваших страницах есть много других активов. Некоторые из наших проектов используют эту функциональность, и мы хотели поделиться некоторыми извлеченными уроками.
Проблема : Страница 1 - простая статическая страница, содержащая несколько элементов. Страница 2 включает ActiveForm, а также другие виджеты. Ресурсы JavaScript для ActiveForm необходимо загружать для запуска встроенного JavaScript, но поскольку они не включали эти активы, при попытке выполнить строку activeform столкнулся с ошибкой JavaScript: «Uncaught TypeError: undefined не является функция».
Решение . Включите активы ActiveForm в пакет общих ресурсов, который будет загружен по всем страницам, гарантируя, что на любой странице входа будут доступны правильные сценарии.
class AppAsset extends AssetBundle
{
...
public $depends = [
'yii\widgets\ActiveFormAsset',
'yii\validators\ValidationAsset',
];
...
}
Проблема : в том же примере, приведенном выше, Page 1 включает несколько виджетов (NavBar и т. Д.). Page 2 включает в себя те же виджеты и еще несколько (ActiveForm и т. Д.). При загрузке страницы через Pjax выполнялся какой-то пользовательский встроенный JavaScript, но встроенный скрипт, размещенный виджетами ActiveForm, не работал, поскольку код проверки не работал. В отладке мы обнаружили, что функция init ActiveForm была запущена, но переменная 'this', похоже, не соответствовала ActiveForm. Фактически это соответствовало div NavBar. Исследуя идентификаторы div, мы увидели, что ActiveForm ожидал иметь идентификатор # w1, но NavBar уже был назначен этот идентификатор на странице 1, поскольку это был первый виджет, встречающийся на этой странице.
Решение . Не полагайтесь на Yii, чтобы автоматически генерировать идентификаторы виджета для вас. Вместо этого всегда указывайте идентификатор при создании виджета, чтобы поддерживать контроль над этими идентификаторами.
Проблема : запрос Pjax отменялся ровно через 1000 мс после начала запроса.
Решение . Увеличьте настройку тайм-аута Pjax. Он по умолчанию составляет 1 секунду, что должно быть приемлемым для производственных сайтов. Однако при разработке, используя xdebug, время загрузки нашей страницы регулярно превышает этот предел.
Проблема : веб-приложение реализует шаблон Post-Redirect-Get (PRG) . Pjax перезагружает всю страницу, а не только перенаправление.
Решение . Это предполагаемое поведение Pjax. Перенаправление не служит своей цели при использовании Pjax, поэтому вы можете определить, является ли запрос Pjax, и если да, то визуализируйте контент вместо перенаправления. Пример может выглядеть так:
$endURL = "main/endpoint";
if (Yii::$app->request->isPjax) {
return $this->run($endURL);
} else {
return $this->redirect([$endURL]);
}
Каков ваш опыт работы с Pjax и Yii? Комментарий ниже, если вы нашли какие-либо ошибки или получили лучшие решения, чем наши!