yii2
Pjax

Paso 1 Añadir Estructura

En views \ site \ form-submit.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(); ?>

Paso 2 Código del lado del servidor

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,
    ]);
}

como usar pjax

Agregue esta línea al comienzo de su vista.

<?php
use yii\widgets\Pjax;
?>

Agregue las siguientes dos líneas alrededor del contenido que necesita actualización parcial.

<?php Pjax::begin(['id'=>'id-pjax']); ?>
Content that needs to be updated
<?php Pjax::end(); ?>

recargar pjax

$.pjax.reload({container: '#id-pjax'});

usa el argumento timeout en pjax

<?php Pjax::begin(['id'=>'id-pjax', 'timeout' => false]); ?>

puede especificar un valor entero para el argumento de tiempo de espera, que sería el número de milisegundos a esperar (su valor predeterminado es 1000). Si el tiempo de ejecución en el servidor es mayor que este valor de tiempo de espera, se activará una carga de página completa.

Por defecto, pjax enviará el formulario utilizando el método GET. Puede cambiar el método de envío de formulario a POST como en el siguiente ejemplo

<?php Pjax::begin(['id'=>'id-pjax', 'timeout' => false, 'clientOptions' => ['method' => 'POST']]); ?>

Pjax uso avanzado

Yii Framework 2.0 se entrega con soporte incorporado para Pjax , una biblioteca de JavaScript que reduce los tiempos de carga de la página. Esto se logra al actualizar solo la parte de la página que ha cambiado a través de Ajax, lo que puede traducirse en ahorros sustanciales si tiene muchos otros activos en sus páginas. Algunos de nuestros proyectos utilizan esta funcionalidad y quisimos compartir algunas lecciones aprendidas.

Problema : la página 1 es una página estática simple que contiene pocos elementos. La página 2 incluye un ActiveForm así como otros widgets. Los recursos de JavaScript de ActiveForm deben cargarse para que se ejecute el JavaScript en línea, pero como la página 1 no incluía esos recursos, la página 2 se encontró con un error de JavaScript al intentar ejecutar la línea de formulario activo: 'Uncught TypeError: undefined no es un función'.

Solución : incluya los activos de ActiveForm en un paquete de activos compartidos que se cargará en todas las páginas, asegurándose de que cualquier página de entrada permita la disponibilidad de los scripts correctos.

class AppAsset extends AssetBundle
{
    ...
    public $depends = [
        'yii\widgets\ActiveFormAsset',
        'yii\validators\ValidationAsset',
    ];
    ...
}

Problema : en el mismo ejemplo anterior, la página 1 incluye algunos widgets (barra de navegación, etc.). La página 2 incluye los mismos widgets y algunos más (ActiveForm, etc.). Al cargar la página a través de Pjax, se ejecutaba algún JavaScript en línea personalizado, pero el script en línea colocado por el widget ActiveForm no parecía funcionar, ya que el código de validación no funcionaba. En la depuración, encontramos que la función de inicio ActiveForm se estaba ejecutando, pero la variable 'this' no parecía corresponder al ActiveForm. En realidad correspondía a la div NavBar. Al investigar los ID de div, vimos que ActiveForm esperaba tener el ID de # w1, pero a la barra de navegación ya se le asignó ese ID en la página 1 ya que ese fue el primer widget que se encontró en esa página.

Solución : No confíe en Yii para generar automáticamente las ID de los widgets por usted. En su lugar, siempre pase una ID al crear el widget para mantener el control de esas ID.

Problema : la solicitud Pjax se estaba cancelando exactamente 1.000 ms después de que se inició la solicitud.

Solución : Aumente la configuración del tiempo de espera de Pjax. El valor predeterminado es de 1 segundo, que debería ser aceptable para los sitios de producción. Sin embargo, en desarrollo, mientras se usa xdebug, nuestros tiempos de carga de la página superan regularmente este límite.

Problema : la aplicación web implementa el patrón Post-Redirect-Get (PRG) . Pjax recarga toda la página en lugar de solo la redirección.

Solución : Este es el comportamiento pretendido de Pjax. La redirección no cumple su función cuando se usa Pjax, por lo que puede determinar si una solicitud es Pjax y, de ser así, renderizar el contenido en lugar de redirigirlo. Un ejemplo puede parecer:

$endURL = "main/endpoint";
if (Yii::$app->request->isPjax) {
    return $this->run($endURL);
} else {
    return $this->redirect([$endURL]);
}

¿Cuál ha sido tu experiencia con Pjax y Yii? ¡Comenta a continuación si has encontrado algún problema o tienes mejores soluciones que las nuestras!