แนวทางการทำ Pjax ใน Yii2

ในบทความนี้จะเล่าถึงการทำ Pjax ใน Yii2 ก่อนอื่นก็คงต้องตอบคำถามนี้ก่อน "Pjax คืออะไร" Pjax คือ jQuery PlugIn ที่ใช้ pushstate+Ajax นั่นเอง แล้ว "pushState คืออะไร" เจ้า pushState เป็น Method หนึ่งที่ใช้ในการเพิ่ม History เข้าไปในรายการของ History ทั้งหมด โดย Ajax ไม่มีการเปลี่ยนหน้าซึ่งจะกำหนด History ได้ยาก จึงแก้ไขโดยการใช้ Method pushState นั่นเอง (มีใน HTML 5 นะฮาฟ) ซึ่ง Method นี้เป็นส่วนหนึ่งของ History API

        .--.
       /    \
      ## a  a
      (   '._)
       |'-- |
     _.\___/_   ___pjax___
   ."\> \Y/|<'.  '._.-'
  /  \ \_\/ /  '-' /
  | --'\_/|/ |   _/
  |___.-' |  |`'`
    |     |  |
    |    / './
   /__./` | |
      \   | |
       \  | |
       ;  | |
       /  | |
 jgs  |___\_.\_
      `-"--'---'

pjax = pushState + ajax

เอาล่ะก็รู้จักคร่าวๆ ล่ะครับไปดู Concept สำหรับ Yii Framework กันได้เลย

Controller

public function actionIndex()
{
        $model = new Countries();
 
        if ($model->load(Yii::$app->request->post()) && $model->save())
        {
            $model = new Countries(); //reset model
        }
 
        $searchModel = new CountriesSearch();
        $dataProvider = $searchModel->search(Yii::$app->request->queryParams);
 
        return $this->render('index', [
            'searchModel' => $searchModel,
            'dataProvider' => $dataProvider,
            'model' => $model,
        ]);
}

View

index.php

<?php
 
use yii\helpers\Html;
use yii\grid\GridView;
use yii\widgets\Pjax;
 
/* @var $this yii\web\View */
/* @var $searchModel app\models\CountriesSearch */
/* @var $dataProvider yii\data\ActiveDataProvider */
 
$this->title = Yii::t('app', 'Countries');
$this->params['breadcrumbs'][] = $this->title;
?>
<div class="countries-index">
 
    <h1><?= Html::encode($this->title) ?></h1>
    <?php // echo $this->render('_search', ['model' => $searchModel]); ?>
 
    <p>
        <?= Html::a(Yii::t('app', 'Create {modelClass}', [
    'modelClass' => 'Countries',
]), ['create'], ['class' => 'btn btn-success']) ?>
    </p>
 
<!-- Render create form -->    
    <?= $this->render('_form', [
        'model' => $model,
    ]) ?>
 
 
<?php Pjax::begin(['id' => 'countries']) ?>
    <?= GridView::widget([
        'dataProvider' => $dataProvider,
        'filterModel' => $searchModel,
        'columns' => [
            ['class' => 'yii\grid\SerialColumn'],
            'id',
            'name',
            ['class' => 'yii\grid\ActionColumn'],
        ],
    ]); ?>
<?php Pjax::end() ?>
</div>

_form.php

<?php
 
use yii\helpers\Html;
use yii\widgets\ActiveForm;
 
/* @var $this yii\web\View */
/* @var $model app\models\Countries */
/* @var $form yii\widgets\ActiveForm */
?>
 
<?php
 
$this->registerJs(
   '$("document").ready(function(){ 
        $("#new_country").on("pjax:end", function() {
            $.pjax.reload({container:"#countries"});  //Reload GridView
        });
    });'
);
?>
 
<div class="countries-form">
 
<?php yii\widgets\Pjax::begin(['id' => 'new_country']) ?>
<?php $form = ActiveForm::begin(['options' => ['data-pjax' => true ]]); ?>
 
    <?= $form->field($model, 'name')->textInput(['maxlength' => 200]) ?>
 
 
    <div class="form-group">
        <?= Html::submitButton($model->isNewRecord ? Yii::t('app', 'Create') : Yii::t('app', 'Update'), ['class' => $model->isNewRecord ? 'btn btn-success' : 'btn btn-primary']) ?>
    </div>
 
<?php ActiveForm::end(); ?>
<?php yii\widgets\Pjax::end() ?>
</div>