yii2
Pjax

Passaggio 1 Aggiungi struttura

Nelle viste \ 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(); ?>

Passaggio 2 Codice lato server

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

come usare pjax

Aggiungi questa riga all'inizio della tua vista.

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

Aggiungi le seguenti due righe attorno al contenuto che richiede un aggiornamento parziale.

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

ricarica pjax

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

utilizzare l'argomento di timeout in pjax

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

è possibile specificare un valore intero per l'argomento di timeout, che sarebbe il numero di millisecondi da attendere (il suo valore predefinito è 1000). Se il tempo di esecuzione nel server è maggiore di questo valore di timeout, verrà attivato un caricamento di pagina completo.

Per impostazione predefinita, pjax invierà il modulo utilizzando il metodo GET. È possibile modificare il metodo di invio del modulo a POST come nell'esempio seguente

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

Utilizzo avanzato Pjax

Yii Framework 2.0 viene fornito con il supporto integrato per Pjax , una libreria JavaScript che riduce i tempi di caricamento delle pagine. Ciò si ottiene semplicemente aggiornando la parte della pagina che è stata modificata tramite Ajax, che può tradursi in notevoli risparmi se si hanno molte altre risorse sulle proprie pagine. Alcuni dei nostri progetti utilizzano questa funzionalità e volevamo condividere alcune lezioni apprese.

Problema : la pagina 1 è una semplice pagina statica che contiene pochi elementi. La pagina 2 include un ActiveForm e altri widget. Le risorse JavaScript ActiveForm devono essere caricate per poter eseguire JavaScript inline, ma poiché la pagina 1 non ha incluso tali risorse, si è verificato un errore JavaScript durante il tentativo di esecuzione della linea activeform: 'Uncaught TypeError: undefined non è un funzione'.

Soluzione : includi le risorse ActiveForm in un pacchetto di risorse condivise che verrà caricato su tutte le pagine, assicurando che qualsiasi pagina di entrata consenta la disponibilità degli script corretti.

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

Problema : nello stesso esempio sopra, la Pagina 1 include alcuni widget (NavBar, ecc.). La pagina 2 include gli stessi widget e alcuni altri (ActiveForm, ecc.). Durante il caricamento della pagina tramite Pjax, era in esecuzione qualche inline JavaScript personalizzato, ma lo script inline inserito dal widget ActiveForm non sembrava funzionare, in quanto il codice di convalida non funzionava. Nel debug, abbiamo rilevato che la funzione init di ActiveForm era in esecuzione, ma la variabile "this" non sembrava corrispondere a ActiveForm. In realtà corrispondeva al div NavBar. Analizzando gli ID div, abbiamo visto che ActiveForm si aspettava di avere l'ID di # w1, ma il NavBar aveva già assegnato quell'ID al Page 1 poiché era il primo widget incontrato su quella pagina.

Soluzione : non fare affidamento su Yii per generare automaticamente gli ID del widget. Invece, passare sempre un ID durante la creazione del widget per mantenere il controllo di tali ID.

Problema : la richiesta Pjax veniva annullata esattamente 1.000 ms dopo l'avvio della richiesta.

Soluzione : aumentare l'impostazione di timeout Pjax. Il valore predefinito è 1 secondo, che dovrebbe essere accettabile per i siti di produzione. Tuttavia, in fase di sviluppo, durante l'utilizzo di xdebug, i tempi di caricamento della pagina superano regolarmente questo limite.

Problema : l'applicazione Web implementa il pattern Post-Redirect-Get (PRG) . Pjax ricarica tutta la pagina invece del solo reindirizzamento.

Soluzione : questo è il comportamento previsto di Pjax. Il reindirizzamento non raggiunge il suo scopo quando si utilizza Pjax, quindi è possibile determinare se una richiesta è Pjax e, in tal caso, eseguire il rendering del contenuto anziché reindirizzarlo. Un esempio può essere simile a:

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

Qual è stata la tua esperienza con Pjax e Yii? Commenta di seguito se hai trovato qualche trucco o hai soluzioni migliori della nostra!