yii2
Pjax

Étape 1 Ajouter une structure

Dans 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(); ?>

Étape 2 Code côté serveur

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

comment utiliser pjax

Ajoutez cette ligne au début de votre vue.

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

Ajoutez les deux lignes suivantes autour du contenu qui nécessite une mise à jour partielle.

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

recharger pjax

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

utiliser l'argument de délai d'attente dans pjax

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

vous pouvez spécifier une valeur entière pour l'argument timeout, qui correspond au nombre de millisecondes à attendre (sa valeur par défaut est 1000). Si le temps d'exécution sur le serveur est supérieur à cette valeur de délai d'attente, un chargement complet de la page sera déclenché.

Par défaut, pjax soumettra le formulaire en utilisant la méthode GET. Vous pouvez changer la méthode de soumission de formulaire à POST comme dans l'exemple suivant

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

Pjax utilisation avancée

Yii Framework 2.0 est fourni avec une prise en charge intégrée de Pjax , une bibliothèque JavaScript qui réduit les temps de chargement des pages. Cela se fait en ne mettant à jour que la partie de la page qui a été modifiée via Ajax, ce qui peut se traduire par des économies substantielles si vous avez de nombreux autres actifs sur vos pages. Certains de nos projets utilisent cette fonctionnalité et nous voulions partager certaines leçons apprises.

Problème : La page 1 est une page statique simple contenant peu d'éléments. La page 2 inclut un ActiveForm ainsi que d'autres widgets. Les ressources JavaScript ActiveForm doivent être chargées pour que le code JavaScript intégré s'exécute, mais comme la page 1 n'inclut pas ces ressources, la page 2 a généré une erreur JavaScript lors de l'exécution de la ligne activeform: 'Uncaught TypeError: undefined fonction'.

Solution : incluez les actifs ActiveForm dans un ensemble d'actifs partagé qui sera chargé sur toutes les pages, en veillant à ce que toute page de saisie autorise la disponibilité des scripts appropriés.

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

Problème : Dans le même exemple ci-dessus, la page 1 inclut quelques widgets (NavBar, etc.). La page 2 inclut les mêmes widgets et quelques autres (ActiveForm, etc.). Lors du chargement de la page via Pjax, du code JavaScript en ligne personnalisé fonctionnait, mais le script intégré placé par le widget ActiveForm ne semblait pas fonctionner, car le code de validation ne fonctionnait pas. Dans debug, nous avons constaté que la fonction init ActiveForm était en cours d'exécution, mais la variable 'this' ne semblait pas correspondre à ActiveForm. Il correspondait en fait à la div NavBar. En examinant les identifiants div, nous avons vu que l'ActiveForm s'attendait à avoir l'identifiant # w1, mais la barre de navigation était déjà affectée à cet identifiant sur la page 1 puisqu'il s'agissait du premier widget rencontré sur cette page.

Solution : Ne vous fiez pas à Yii pour générer automatiquement les ID de widget pour vous. Au lieu de cela, transmettez toujours un ID lors de la création du widget pour conserver le contrôle de ces ID.

Problème : la requête Pjax était annulée exactement 1 000 ms après le lancement de la requête.

Solution : augmentez le délai d'attente Pjax. La valeur par défaut est 1 seconde, ce qui devrait être acceptable pour les sites de production. Cependant, lors du développement, lorsque vous utilisez xdebug, nos temps de chargement de page dépassent régulièrement cette limite.

Problème : l'application Web implémente le modèle Post-Redirect-Get (PRG) . Pjax recharge la page entière au lieu de la redirection.

Solution : Ceci est le comportement prévu de Pjax. La redirection ne remplit pas sa fonction lors de l'utilisation de Pjax, vous pouvez donc déterminer si une requête est Pjax et, si tel est le cas, afficher le contenu au lieu de le rediriger. Un exemple peut ressembler à ceci:

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

Quelle a été votre expérience avec Pjax et Yii? Commentez ci-dessous si vous avez trouvé des pièges ou avez de meilleures solutions que les nôtres!